Question

假设我有一些HTML，如下所示，我想搜索具有#top类的foo元素的后代。但是，我只想找到不是我找到的其他元素的子元素的元素。也就是说，虽然通常我想以递归方式搜索foo元素，但我不想递归到foo元素。

<div class="foo" id="top">
    <div class="bar">
        <div class="foo"> <!-- Find this !-->
        </div>
    </div>
    <div class="foo"> <!-- Find this !-->
        <div class="foo"> <!-- Do not find this, because we already found parent !-->
        </div>
    </div>
</div>

我怎样才能最好地使用Javascript / jQuery？

编辑：围绕这一点存在一些混乱。上面的例子是为了说明问题，但它没有封装一般解决方案应该解决的每个边缘情况，所以我在这里创建了一个更复杂的例子：http://jsfiddle.net/JQNyW/1/

Answer 1

喜欢这个吗？

$('#top').find('.foo').filter(function () { // while selecting ignore parent which also has foo
    return $(this).parents('.foo').length == 1; //length is 1 since the #top also has foo
});

<强> Fiddle

或者

$('#top').find('.foo').filter(function () {
    return $(this).parents('.foo:not("#top")').length == 0
}).css('color', 'red');

Answer 2

我可能会单独使用children（）或find（），因为他们不需要链接来访问孩子的孩子，这使得它更清洁，优化和更快地处理，如下所示：

 $('#top').children('.foo').attr('this','yeah');

 $('#top').find('> .foo',this).attr('child','yes');

在控制台中查看，它只将att（）添加到第一个元素。

根据您的需要参考jQuery中的文档：

http://api.jquery.com/find/

http://api.jquery.com/children/

希望这会有所帮助。

Answer 3

您可以使用以下选择器：

#top > .foo, :not(.foo) > .foo

使用jQuery或本机JavaScript。

递归搜索顶级匹配元素

3 个答案: