JavaScript querySelectorAll，如何仅匹配顶级元素？

Question

我可以使用 Polymer 技术。

假设我在模板中有以下内容：

<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。我认为如果更改查询语句，可能会得到正确的结果。请指导一下。谢谢。

- Vivek Muthal

---

给定代码，你期望的输出是什么？ - Sadikhasan

输出将是三个li节点。 - Vivek Muthal

等一下，你为什么给这个问题打了jquery的标签？ - Ja͢ck

这是关于选择器的问题，以便那些使用jQuery的人也能回答这个问题。 - Vivek Muthal

@VivekMuthal 这是 filter 的一个不好的使用方式，你应该使用 forEach，因为你实际上并没有过滤任何东西。 - Ruan Mendes

Answer 1

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

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

- Vivek Muthal

---

我没有看到Mohit的评论，请添加一些解释。:scope支持不太好。https://developer.mozilla.org/en-US/docs/Web/CSS/:scope - Ruan Mendes

http://jsfiddle.net/wLpCy/3/ 这可以用来支持许多浏览器的 :scope。 - Umesh Sehta

@JuanMendes Mohit已经删除了该评论。它包含一个演示链接，即http://jsfiddle.net/wLpCy/2/。 - Vivek Muthal

Answer 2

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

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

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

演示

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

更新

由于您的问题标记了jquery，这里提供另一种解决方案：

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

- Ja͢ck

Answer 3

您需要了解一些关于li的知识。如果它位于文档的顶层，请使用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>

- Ruan Mendes

Answer 4

将一个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元素。

编辑

如果它在一个Polymer模板中，你可以使用类似于template > ul > li的方式。

- winhowes

---

不好意思，我无法在 Polymer 中添加 ID，因为模板是由用户提供的。 - Vivek Muthal

抱歉，它没有帮助。 - Vivek Muthal

将“template”更改为“content”有什么作用吗？你能发布你的聚合元素或至少一些它的“html”，这样我就可以帮助诊断这个特定的情况吗？ - winhowes

<ul> 是否保证是 Light DOM 中的第一个元素？ - winhowes

谢谢，但是我已经使用查询选择器中的:scope解决了。 - Vivek Muthal

Answer 5

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

如果你想限制只到顶层的 ul，li 元素。那么请使用 ul 标签的直接 parent。

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

假设 body 是 ul 的直接父元素。如果您有带有类或 ID 的包装器 div / 任何其他元素，请在 body 的位置使用它。

- mohamedrias