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>

我想创建一个执行此操作的悬停功能：

将鼠标悬停在#menutable .optionA
脚本扫描所有#maintable .options divs以查找文本字符串“A”
如果在div.options中找到“A”，则没有任何反应
如果在div.options中找不到“A”，脚本会将一些CSS添加到父div（.elbox）
删除mouseout上的新课程
在悬停.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。

我做错了什么？这是我的“每个人”吗？我错过了父选择器吗？ ......或者完全是错误的做法？

为我的noobness道歉（我正在努力），谢谢！

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/

我想，也许你不想在menutable悬停时搜索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');
      }
    );
  }
);

如果jQuery包含特定文本（x100），则jQuery在悬停到另一个div时添加类

3 个答案: