25

子リストがネストされたリストを取得したとしましょう。

<ul>
    <li></li>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
</ul>

そしてdocument.querySelectorAll()、選択を行うために使用します。

var ul = document.querySelectorAll("ul");

ulコレクションを使用して直接の子要素を取得するにはどうすればよいですか？

ul.querySelectorAll("> li"); 
// Gives 'Error: An invalid or illegal string was specified'

どういうわけかキャッシュされていると仮定しましょうul（そうでなければ私はul > li直接行うことができたでしょう）。

jQueryではこれは機能します：

$("ul").find("> li");

しかし、それはネイティブではありませんquerySelectorAll。解決策はありますか？

4

3 に答える 3

41

現在の要素に「根ざした」セレクターを記述する正しい方法は、 を使用すること:scopeです。

ul.querySelectorAll(":scope > li");

説明と堅牢なクロスブラウザー ソリューションについては、こちらの回答を参照してください: https://stackoverflow.com/a/21126966/1170723

于 2014-02-26T00:45:05.720 に答える
13

返されるのは NodeList であるためul、jQuery コレクションのように内容を暗黙的にループすることはありません。withを使用するul[0].querySelectorAll()か、さらに選択する必要があります。ulquerySelector()

それに加えて、and は現在のコンテキストからは機能しquerySelectorAll()ません。>ただし、lazd の回答(ただし、ブラウザーの互換性を確認してください)、またはこれらの回避策のいずれか (ブラウザーの問題はないはずです) を使用して動作させることができます...

[].filter.call(ul.querySelectorAll("li"), function(element){
     return element.parentNode == ul;
});

jsFiddle .

liこれにより、 の子孫であるすべての要素が選択さulれ、直接の子孫ではない要素が削除されます。

または、すべてchildNodesを取得してからフィルタリングすることもできます...

[].filter.call(ul.childNodes, function(node) {
    return node.nodeType == 1 && node.tagName.toLowerCase() == 'li';
});

jsFiddle .

于 2012-04-17T10:59:51.993 に答える
1

NodeList返された byを反復処理してから、そのリスト内の各要素をdocument.querySelectorAll()呼び出す必要があります。element.querySelectorAll()

于 2012-04-17T11:00:50.693 に答える