使用jQuery选择器选择不在子类中的所有元素

Question

考虑到页面上可能会有不同的 HTML 代码：

<div id="start">
<div>
    <div class="buttons">select this</div>
    <div class="myControl">
        <div class="buttons">dont select this</div>
    </div>
    <div>
        <div class="buttons">select this</div>
    </div>
</div>
</div>​

我想将所有类名为 buttons 的元素标记为红色：

$('#start').find('.buttons').css('color','red');​

但是，如果它们在myControl内部，则不应该更改颜色，因此只有“select this” divs应为红色。

伪代码选择器如下：

选择所有具有“buttons”类的元素，但忽略带有“myControl”类的所有内容

我准备了一个jsfiddle链接。

---

编辑

我不知道起始div也可以有“myControl”类（试图尽可能缩小我的项目代码以使其可读），因此实际上看起来像这样（完整块也可以嵌套在具有myControl类的更多div中）。

因此，很遗憾，（对于我的原始问题正确的）答案在这种情况下不起作用，对此感到抱歉！有没有任何想法可以调整其中一个答案，以解决这个问题？

<div class="myControl" id="start">
<div>
    <div class="buttons">select this</div>
    <div class="myControl">
        <div class="buttons">dont select this</div>
    </div>
    <div>
        <div class="buttons">select this</div>
    </div>
</div>
</div>​

这里是新 jsfiddle。

---

解决方法

最终的解决方法如下：

$('#start').find('.buttons:not("#start div.myControl div.buttons ")')
.css('color','red');​

- Marc

Answer 1

您可以使用 .not。

 $('#start').find('.buttons:not("div.myControl > div.buttons ")').css('color','red');​

jsfiddle

http://jsfiddle.net/QqRuV/3/

- YogeshWaran

---

这是一个很好的解决方案，但如果按钮不是myControl的直接子元素，则无法正常工作...你有什么想法如何解决吗？这是您分叉并更改后的jsfiddle链接：http://jsfiddle.net/marcgrabow/QqRuV/5/ - Marc

然后像这样使用：$('#start').find('.buttons:not("div.myControl div.buttons ")').css('color','red'); 我已经更新了 jsfiddle。http://jsfiddle.net/QqRuV/6/ - YogeshWaran

这个的单个选择器版本是 $(#start .buttons:not(.myControl .buttons))。 - techfoobar

非常感谢你们，同时也非常抱歉，外部的 div 也可以是 myControl 类，这会导致它不能正常工作（它在我的项目中，我没有意识到）... 那么也有可能解决这个问题吗？希望这是最后一次更改... :/ http://jsfiddle.net/marcgrabow/QqRuV/7/ - Marc

请使用not选择器和外部元素ID。 $('#start').find('.buttons:not("#start div.myControl div.buttons ")').css('color','red'); 请查看jsfiddle链接：http://jsfiddle.net/QqRuV/10/ - YogeshWaran

你太棒了，非常感谢！+1！我真的应该学习更多关于选择器的知识... - Marc

Answer 2

$('#start').find('.buttons').filter(function(e) { return $(this).parent(".myControl").length < 1; }).css('color','red');​

- Daniel Hallqvist

---

用过滤器函数是个好的解决方案（之前没有意识到）但我有点担心性能问题？ - Marc

其实，我认为无论你选择哪种方法，框架都会执行类似的操作（不确定，只是猜测）。但就可读性而言，我认为YogeshWaran的解决方案使用not()更好一些。这可能只是个人口味问题 :) 祝好运！ - Daniel Hallqvist

Answer 3

$('#start').children('.buttons').css('color', 'red')

- Prasad Surase

---

你试过这个吗？它不起作用，因为按钮不是父元素的直接子元素。 - Marc