Question

鉴于$('#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'))

Answer 1

你也可以这样：

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

working demo

Answer 2

使用>选择器

元素＆gt;元素选择器用于选择具有特定父元素的元素。注意：未选择直接不是指定父级子级的元素。

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

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

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

3 个答案: