jQuery 只查找非嵌套元素

Question

鉴于此 HTML 结构

<div class="item">
    <div class="item">
        select me
        <div class="item">don't select me</div>
    </div>
    <span>
        <div class="item">select me</div>
    </span>
</div>

还有这个 jQuery:

var firstItem = $('.item:first');
var selector = firstItem.find('.item');
selector.css('color', 'red');

我正在寻找一种方法来仅标记firstItem div内的非嵌套.item元素。这里棘手的部分是，firstItem 本身已经(或可以)嵌套在 .item 类中。

<小时/>

我尝试了什么？

firstItem.find('.item').not('.item .item')

这不起作用，因为我们开始的第一个级别已经是一个 .item 类。并且它已经可以嵌套 x 次，因此它可以是 .item .item .item .item 或其他。而且起始元素没有 ID，因此我也无法在选择器中使用它。

<小时/>

我认为解决方案应该类似于反转 .closest()它沿着 DOM 向下移动，并且不会搜索已找到的项目的内容。

在这里准备了一个jsFiddle:http://jsfiddle.net/LWmy3/2/

Answer 1

试试这个

var firstItem = $('.item:first');
$(firstItem).find(".item").each(function () {
    //console.log($(this).parent(".item")[0])
    if ($(this).parent(".item")[0] === undefined) {
        $(this).css('color', 'red')
    } else if ($(this).parent(".item")[0] != $(firstItem)[0]) {
        $(this).css('color', 'cyan')
    } else {
        $(this).css('color', 'red')
    }
});

Fiddle