Javascript querySelectorAll，如何只匹配顶级元素？

Question

我正在使用聚合物。

假设我在模板中有如下内容

<ul>    
    <li>
        Home
    </li>
    <li>
        About
    </li>
    <li>
        Actions
        <ul>
            <li>
                Logout
            </li>
        </ul>
    </li>       
</ul>

在就绪功能中

var listNodes = this.querySelectorAll('ul > li');

我需要有关此 javascript 查询选择器的帮助。我应用的当前查询为我提供了该模板中所有 ul 的 li。但我只想要顶部 ul 的 li。我不想要模板的所有子 li。 我认为将其更改为正确的查询，我可能会得到正确的结果。请指导。谢谢。

Answer 1

使用 Mohit 的评论。能够找出答案。

var listNodes = this.querySelectorAll('ul:scope > li');

Answer 2

手动解决方案并不是那么糟糕，只需找到第一个列表，然后遍历其子元素：

var topList = document.querySelector('ul');

[].forEach.call(topList.children, function(el) {
  console.log(el);
});

Demo

如果列表有一个可识别的父元素（例如 body 或具有 id 的元素），您可以使用直接后代运算符 (>)。

更新

由于您的问题被标记为jquery，这里有另一个解决方案：

$('ul:first > li').each(function() {
  console.log(this);
});

Answer 3

你必须对李有所了解。如果它在文档的顶层，请使用body > ul > li

console.log(document.querySelectorAll('body > ul > li'))

<ul>    
    <li>
        Home
    </li>
    <li>
        About
    </li>
    <li>
        Actions
        <ul>
            <li>
                Logout
            </li>
        </ul>
    </li>       
</ul>

否则，你必须有办法唯一标识ul的父级

console.log(document.querySelectorAll('#user-content > ul > li'))

<div id="user-content">
<ul>    
    <li>
        Home
    </li>
    <li>
        About
    </li>
    <li>
        Actions
        <ul>
            <li>
                Logout
            </li>
        </ul>
    </li>       
</ul>
</div>

Answer 4

ul > li 检查所有将li 作为直接子级的ul 元素。这就是为什么你会得到所有ul 和li。

如果你想限制在顶层 ul ， li 单独元素。然后为此使用ul标签的直接parent。

   document.querySelectorAll('body > ul > li')

假设body 是ul 的直接父级。如果您有一个包装器 div / 任何其他具有类或 ID 的元素，也可以使用它来代替 body。

Answer 5

像这样对顶部元素应用 id 或一些独特的选择器：

<ul id="top">    
    <li>
        Home
    </li>
    <li>
        About
    </li>
    <li>
        Actions
        <ul>
            <li>
                Logout
            </li>
        </ul>
    </li>       
</ul>

将允许您像这样获得顶级元素：

var topElems = document.querySelectorAll("#top > li");

您可以使用其他独特的选择器，例如 body > ul > li，但想法是您必须唯一标识要搜索的顶级 ul 元素。

编辑

如果它位于聚合物模板中，您可以执行类似template > ul > li 的操作。