javascript - 如何只找到第一个 li 元素

Question

这个问题已经有答案了:

JQuery selectors for first li (4 个回答)

已关闭 3 年前。

我必须创建第一个 li 元素的数组，但我不知道该怎么做。

我的 html 看起来像这样:

<div class="nav">
<ul>
    <li>Element 1</li>
    <li>Element 2
        <ul>
            <li>Element 2.1</li>
            <li>Element 2.2</li>
            <li>Element 2.3</li>
            <li>Element 2.4</li>
        </ul>
    </li>
    <li>Element 3</li>
    <li>Element 4
        <ul>
            <li>Element 4.1</li>
            <li>Element 4.2</li>
            <li>Element 4.3</li>
            <li>Element 4.4</li>
        </ul>
    </li>
</ul>

现在我必须找到第一个 ul 的前 li 个元素 - 元素 1、元素 2、元素 3、元素 4。所以我想使用 querySelectorAll 但我不知道 css 中的 nth-child 之类的东西

有我的 JS querySelectorAll 但我不知道如何找到它

const allVisibleElements = document.querySelectorAll('');

Answer 1

您需要定位 li，它是 ul 的子级，而 ul 是 .nav 的子级，因此您需要使用子组合器 >:

const allVisibleElements = document.querySelectorAll('.nav > ul > li');