0

假设我有一些如下所示的 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/

4

3 回答 3

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
});

小提琴

或者

$('#top').find('.foo').filter(function () {
    return $(this).parents('.foo:not("#top")').length == 0
}).css('color', 'red');
于 2013-06-28T21:46:48.550 回答
0

您可以使用以下选择器：

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

在 jQuery 或原生 JavaScript 中。

于 2013-06-28T21:51:27.677 回答
0

我可能会单独使用 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/

希望这可以帮助。

于 2013-06-28T21:49:58.737 回答