jQuery 只查找不嵌套的元素

Posted 2023-05-09

【中文标题】jQuery 只查找不嵌套的元素

【英文标题】：jQuery find only not nested elements

【发布时间】：2013-10-13 15:37:51

【问题描述】：

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

【问题讨论】：

Maaaaybe 这个？ .parentsUntil()

在这种情况下你会如何使用 .parentsUntil？

拜托，你不能添加单独的类来提高能力

@CoolGadgetsForGeeks 我添加了一个带有parentsUntil() 的演示，不过需要一个额外的类：D

【参考方案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

【讨论】：

我认为如果“不要选择我”被一个 div 包裹，它不会起作用。

@melc - 如果它没有被 div 包裹，它会属于父级，不是吗

wrapperd 与否，如果我正确理解查询，它仍然是具有相同 .item 父级的嵌套 .item

jsfiddle.net/LWmy3/73 在 div 中添加了 不要选择我。

【参考方案2】：

如何选择第一个嵌套的.item 及其兄弟？

我在这里更新了小提琴：http://jsfiddle.net/LWmy3/3/ 使用红色边框而不是红色文本来表明它没有选择“不要选择我”项目。

编辑：使用 each()

http://jsfiddle.net/LWmy3/5/

【讨论】：

谢谢 Karine，但如果 DOM 结构不同（如项目周围的其他 div），这将不起作用。

对不起，我没有看到跨度的第二个小提琴！在这种情况下，我只能想到在选择器上使用 each()...jsfiddle.net/LWmy3/5

【参考方案3】：

这也有效，

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

http://jsfiddle.net/LWmy3/10/ 但是，如果 firstItem 本身是嵌套的，那么您将不得不修改第一行而不是调用

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

你应该用嵌套级别修改0，即

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

【参考方案4】：

使用 $(选择器)

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

小提琴：http://jsfiddle.net/yTVPr/22/

---

使用 .each()

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

为测试添加了额外的 DOM 元素，尽管我认为大多数人都提出了相同的想法。我认为如果不放置至少一个 ID 或类来指示巢穴，会相当困难。

小提琴： http://jsfiddle.net/yTVPr/

---

带有根元素和 parentsUntil()

如果您确实包含了一个嵌套“级别”的类，您可以遍历 each() 并找到长度匹配的 aganist parentsUntil()，如下所示：

<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>

小提琴：http://jsfiddle.net/yTVPr/19/

【参考方案5】：

您可以使用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);

然后这个函数会be used like this:

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