jQuery 只查找非嵌套元素

鉴于此 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/

请您参考如下方法:

试试这个

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