如果包含特定文本，jQuery 将悬停类添加到不同的 div (x100)

Question

出于某种原因，我只是无法掌握如何告诉 jQuery 查看一组中的每个 div，然后根据该 div 的内容做出决定。

我的 HTML 有点像这样：

<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>

我想创建一个悬停函数来执行以下操作：

1. 将鼠标悬停在 #menutable .optionA 上时，
2. 脚本会扫描所有 #maintable .options div 中的文本字符串“A
3. 如果在 div 中找到“A”， ”。 options，没有任何反应
4. 如果在 div.options 中找不到“A”，脚本会向父 div (.elbox) 添加一些 CSS
5. 删除 mouseout 上的新类
6. 在悬停 .optionB 时执行类似操作（查找“B”）并.optionC（查找“C”）

到目前为止，我有这个：

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

但它不起作用。

但是，如果我翻转逻辑，以便在找到“A”时发生 addClass，则该类将在悬停时应用于每个 .elbox。所以，我认为我的脚本实际上可能是在说，“如果任何 .options div 有一个“A”，那么隐藏每个 .elbox。

我做错了什么？是我的“each？”我错过了父选择器吗？。 ..或者只是完全错误的方法？

对我的菜鸟表示歉意（我正在努力）， 谢谢你！

Answer 1

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

此外，您的选择器正在使用 .当它应该是#时

Answer 2

这应该可以解决问题：

$('#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/

Answer 3

看这里
http://jsfiddle.net/Kp39C/8/

我想，也许你不想当菜单表悬停时搜索 A，但要从选项内搜索，其中包含当前单元格内的值。
因此，您必须在更原子的元素中应用悬停事件处理程序。

此外，您还误用了“.”。选择器而不是“#”选择器，请查看此页面以获取有关此问题的更多信息：http ://www.w3.org/TR/css3-selectors/

使用正确的选择器，配合 find() 和 has() jquery 函数可以让你的生活变得更轻松:)

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