jQuery只獲取頂級元素

我只需要從我的樹中獲取第一個匹配的元素（如果發現元素不需要更深入）。問題是這個元素可以被包裝成嵌套的div，所以我不能使用>選擇器。
我的代碼是這樣的：jQuery只獲取頂級元素

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

無法找到解決辦法:(

來源

2011-12-03 corpix

如果您不能使用子選擇器，嘗試

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

此只選擇那些.sub元件，其不是其他.sub元素的後裔。

或者：

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

也可以工作，如果#root是.sub內。

編輯：或者參見@ RightSaidFred對這種情況的評論。

來源

2011-12-03 18:58:48

哇！這就是訣竅！:) – corpix

您也可以修改您的選擇器以處理'＃root'嵌套在'.sub'中的情況：'' $（'＃root .s ub：not（#root .sub .sub）'）'。不幸的是，你沒有得到'querySelectorAll'的好處。 – RightSaidFred

@RightSaidFred：好點，但爲什麼jQuery不使用'querySelectorAll'？ '：not'是一個有效的CSS3選擇器。 –

您可以使用：

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

這是一個詳細的版本：

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

編輯：jsfiddle

來源

2011-12-03 18:54:39 jli

不，無法找到嵌套的div :( – corpix

嘗試使用更新後的版本 – jli

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

來源

2011-12-03 19:02:11 RightSaidFred

這可能是更好的方法。 – jli

你會需要它是第一個div上面的元素或類，然後指定{父 - 選擇}>

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

來源

2015-05-08 13:06:54 sanjay

jQuery只獲取頂級元素

回答

相關問題