Question

我只需要从树中获取第一个匹配的元素（如果发现元素不需要更深入）。问题是这个元素可以包装成嵌套的div，所以我不能使用>选择器我的代码是这样的：

<div id="root">
    <div class="sub">I need this element</div>
    <div>
        <div class="sub">I need this element</div>
    </div>
    <div class="sub">
        <div class="sub">I don't need this element</div>
    </div>
</div>

无法找到解决方案:(

Answer 1

如果您无法使用子选择器，请尝试

$('.sub:not(.sub .sub)')

这仅选择那些不是其他.sub元素后代的.sub个元素。

可替换地：

$('#root .sub').filter(function() {
    return $(this).parentsUntil('#root', '.sub').length === 0;
});

如果#root位于.sub内，

也适用。

编辑：或者查看@ RightSaidFred对此案例的评论。

Answer 2

您可以使用：

$('.sub').parent().not('.sub').children().css('color', 'green');

这是一个冗长的版本：

$('.sub:not(.sub .sub)').css('color', 'green');

修改：jsfiddle

Answer 3

var level = $('#root'),
    subs;

do {
    level = level.children();
    subs = level.filter('.sub');
} while( els.length && !subs.length )

subs变量将保存结果。

这是一种有效的方法，如果您的#root碰巧有.sub祖先，这种做法会有效。

您可以轻松地将其变为可重复使用的功能。

function firstLevelOf( root, selector ) {
    var level = $(root),
        result;

    do {
        level = level.children();
        result = level.filter(selector);
    } while( els.length && !result.length )

    return result;
}

像这样使用：

var subs = firstLevelOf( '#root', '.sub' );

Answer 4

你需要在第一个div之上的元素或类，然后指定{parent-selector}＆gt;

$('#root > div.sub').click(function(){
    // your code here
});

jQuery只获得顶级元素

4 个答案: