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

如果列表具有可识别的父元素（例如正文或具有id的元素），则可以使用直接后代运算符（>）。

更新

由于您的问题标有jquery，因此这是另一种解决方案：

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

Answer 3

将id或某个唯一选择器应用于top元素，如下所示：

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

你必须了解李的一些事情。如果它位于文档的顶层，请使用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 5

ul > li会检查ul个li元素作为直接子元素。这就是您获得所有ul和li的原因。

如果您想仅限于顶级ul，li元素。然后使用ul标签的立即parent。

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

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

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

5 个答案:

更新