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>

我正在寻找一种只标记firstItem div中未嵌套的.item元素的方法。这里棘手的部分是firstItem本身已经（或可以）嵌套在.item类中

---

我试过什么

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

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

---

我认为解决方案应该类似于反向搜索，它沿着DOM向下移动，不搜索已经找到的项的内容

---

在这里准备了一个jsFiddle:

选择第一个嵌套的

.item

及其同级如何

我在这里更新了小提琴：使用红色边框而不是红色文本来显示它没有选择“不要选择我”项

编辑：使用each（）

试试这个

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

这同样有效

var firstItem = $('.item').eq(0);
var selector = firstItem.find('.item').each(function(){
    var $parents = $(this).parents('.item');
    if($parents.eq(0)[0]==firstItem[0]){
       $(this).css('color', 'red');     
    }else{
        $(this).css('color', 'blue');     
    }
});

但是，如果firstItem是嵌套的，那么您必须修改第一行，而不是调用

 $('.item').eq(0)

应使用嵌套级别修改0，即

 $('.item').eq(1)//if it has one .item parent

使用$（选择器） 小提琴：

---

与.each（）

---

Fiddle：

您可以使用

find（）

选择所有匹配的元素，然后删除与选择器匹配的所有嵌套元素。为了便于使用，可以将其包装在jQuery扩展函数中：

$.fn.flatFind = function(selector) {
   // Find everything matching the selector
   var all = this.find(selector);
   // Find nodes nested into one of the "direct" matches
   var nested = all.find(selector);
   // Return everything but the nested nodes
   return all.not(nested);
}

然后，该功能将：

---

是这个吗？在这种情况下，你会如何使用.parentsunl？拜托，你不能为它添加单独的类吗accebility@CoolGadgetsForGeeks我已经添加了一个带有

parentsUntil（）

的演示，虽然这需要一个额外的类：DThank you Karine，但是如果DOM结构不同（与项目周围的其他div一样），这将不起作用1.对不起，我没看到第二把小提琴在拉跨度！在这种情况下，我只能考虑在选择器上使用each（）。。。我认为如果“不选择我”由div包装，它将不起作用。@melc-如果它不由div包装，它将属于父项，它是否未包装，它仍然是一个嵌套的.item，具有相同的.item父项，如果我正确理解添加的查询，请不要在div中选择我。

$('.item:not(.item:first-child .item .item)').css( 'color', 'purple' );

$(".item:first-child").each(function( index, element ) {
    if ( $(this).parents( '.item' ).length <= 1 )
        $(this).css( 'color', 'red' );
    else
        $(this).css( 'color', 'black' );
});

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

<script>
   /** 
    *  Transverse Up the tree
    *  to find .toplevel, if length
    *  0, then it's met the parent/target. 
   **/
   $(".item").each(function( index, element ) {
       if ( $(this).parentsUntil( '.toplevel', '.item' ).length === 0 )
           $(this).css( 'color', 'blue' );
   });
</script>

$.fn.flatFind = function(selector) {
   // Find everything matching the selector
   var all = this.find(selector);
   // Find nodes nested into one of the "direct" matches
   var nested = all.find(selector);
   // Return everything but the nested nodes
   return all.not(nested);
}

var baseItem = $(".item:first")
baseItem.flatFind('.item').css('color', 'red');