如何过滤掉子树，然后在jQuery中搜索

How can I filter out a subtree and then search in jQuery?

本文关键字：然后 jQuery 搜索 何过滤 过滤      更新时间：2023-09-26

给定$('#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-panel的孩子，然后 （2） .find('.ted-collapse) .

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

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

你也可以这样走：

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

工作演示

使用>选择器

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

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

获取#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)');

有关工作示例，请参见 http://jsfiddle.net/jhfrench/gzjvsyb3/。

相关文章：