如何过滤掉子树然后在 jQuery 中搜索？ [复制]答案

【问题标题】：How can I filter out a subtree and then search in jQuery? [duplicate]如何过滤掉子树然后在 jQuery 中搜索？ [复制]
【发布时间】：2014-12-17 06:18:39
【问题描述】：

给定$('#test')和下面的DOM，如何选择对应的ted-collapse？

<div id='test' class='ted-panel'>
  <div class='ted-collapse'></div>

  <div class='ted-panel'>
    <div class='ted-collapse'></div>
    <div class='ted-collapse'></div>
    <div class='ted-collapse'></div>
  </div>
</div>

注意事项：

对应的.ted-collapse 是当前.ted-panel 的子元素，不是任何嵌套.ted-panel 的子元素
.ted-collapse 不保证是 .ted-panel 的直系子级

基本上，我想 (1) 过滤掉所有子 .ted-panels，然后 (2) .find('.ted-collapse)。

这是基于其中一个 cmets 的单行解决方案：

$('#test').not($('#test').find('.ted-collapse'))

【问题讨论】：

或许，有人不明白……
更容易让我们知道您想做什么
$('#test .ted-collapse').not('#test>.ted-panel .ted-collapse')???
看起来你真的不知道标记会是什么样子，一遍又一遍地添加相同的类，然后无法使用它们，这似乎很愚蠢！
这就是你想要的吗？ stackoverflow.com/a/24314604/2324107

标签： javascript jquery

【解决方案1】：

你也可以这样走：

$('.ted-panel .ted-collapse:not(#test.ted-panel .ted-panel .ted-collapse)')

working demo

【讨论】：

那不行，它会得到所有.ted-collapse。并不是因为您从选择器中排除了父级，它才会排除子级。
我认为现在就像 OP 想要的那样......

【解决方案2】：

使用> 选择器

element>element 选择器用于选择具有特定父级的元素。注意：不是指定父级的直接子级的元素不会被选中。

$('#test > .ted-collapse')

【讨论】：

.ted-collapse 不保证是 .ted-panel 的直接子级
我认为它可能在 dom 中的 ted-panel 之后出现，但仍然是 #test 的子项
@ScottMurphy 不，如果不清楚，请抱歉。也不一定是#test 的直接子代。

【解决方案3】：

获取#test，查找归类为.ted-collapse的元素，但排除作为#test的直接子元素的直接子元素的元素：

$('#test').find('.ted-collapse:not(#test > .ted-panel .ted-collapse)');

或者，如果 #test 不是正确的初始选择器，也许

$('div.ted-panel:first-child').find('.ted-collapse:not(div.ted-panel:first-child > .ted-panel .ted-collapse)');

See http://jsfiddle.net/jhfrench/gzjvsyb3/ for working examples.

【讨论】：

问题是它并不总是#test..尽管我认为总会有一个 id。所以这可能有效。
我在 jsFiddle 中添加了一个选择器的变体。