jQuery add class on hover to a different div if it contains specific text (x100)

For some reason, I just can't grasp how to tell jQuery to look at each div in a bunch and then make a decision based on just that div's content.

I have HTML kinda like this:

<div id="maintable">
 <div class="elbox">
  content
  <div class="options">A,B,C</div>
 </div>
 <div class="elbox">
  content
  <div class="options">B,F</div>
 </div>
 <!-- and about a hundred more just like these -->)
</div>

<div id="menutable">
 <div class="optionA">A</div>
 <div class="optionB">B</div>
 <div class="optionC">C</div>
</div>

I want to make a hover function that does this:

1. On hover over #menutable .optionA
2. Script scans all #maintable .options divs for the text string "A"
3. If "A" is found in a div.options, nothing happens
4. If no "A" is found in a div.options, script adds some CSS to the parent div (.elbox)
5. Remove new class on mouseout
6. Do similar on hover of .optionB (look for "B") and .optionC (look for "C")

So far, I have this:

$('.menutable').hover(function() {
    $('.options').each(function(i) {
        if (!$(".options:contains('A')")) {
            $('.elbox').addClass('bgtransp');                  
        }
    });
});

But it doesn't work.

However, if I flip the logic so that addClass happens if "A" is found, the class is appl开发者_开发百科ied onhover to every .elbox. So, I think my script might actually be saying, "if any .options div has an "A," then hide every .elbox.

What am I doing wrong? Is it my "each?" Am I missing a parent selector? ...Or just the wrong approach entirely?

With apologies for my noobness (I'm working on it), THANK YOU!

---

$('#menutable div').hover(function() {
    var current = $(this);
    $('#maintable .options').each(function() {
        if (!$(this).is(":contains('" + current.text() + "')")) {
            $(this).closest('.elbox').addClass('bgtransp');                  
        }
    });
});

Also your selector is using a . when it should be a #

---

This should do the trick:

$('#menutable div').hover(function() {
    var that = this;
    $('#maintable .options').filter(function() {
        return $(this).text().indexOf($(that).text()) === -1;
    }).closest(".elbox").css("border", "1px solid red");
});

http://jsfiddle.net/zfPZS/1/

---

see here http://jsfiddle.net/Kp39C/8/

I think, perhaps you didn't want to search for A when the menutable was hover but to search from within the options, which contained the value that the current cell had inside. therefore you have to apply the hover event handler in a more atomic element.

Also you were missusing '.' selector instead of "#" selector, take a look at this page for more information on that matter: http://www.w3.org/TR/css3-selectors/

Using the right selector, with the find() and has() jquery functions can make your life way lot easier :)

$('#menutable')
.find('div')
.hover(
  function() {
    var overMe=$(this);
      $(".options:contains('"+overMe.html()+"')").each(
      function() {
        $(this).addClass('bgtransp');
      }
    );
  }
);