Javascript querySelectorAll，如何只匹配top元素？

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。但我只想要 li of top ul。我不想要模板的所有子项 li。我认为将其更改为正确的查询，我可能会得到正确的结果。请指导。谢谢

Answer 1

像这样将 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.

的操作

Answer 2

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

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

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 /任何其他带有 class 或 ID 的元素，也可以使用它来代替 body.

Answer 5

手动解决方案并没有那么糟糕，只需找到第一个列表，然后迭代其子元素即可：

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

Javascript querySelectorAll，如何只匹配top元素？

Javascript querySelectorAll, how to match with only top elements?

javascript

jquery

html

polymer

selectors-api

更新