javascript - 遍历 li 元素

Question

我的 HTML 代码中有一个结构，看起来有点像这样。

<nav id="nav">
    <ul>
        <li>Li 1</li>
        <li>Li 2</li>
        <li>Li 3</li>
    </ul>
</nav>

为了遍历列表，我使用了 JavaScript 和 jQuery 插件。代码看起来有点像这样。

for(i = 1; i <= navSide.children("ul").children("li").length; i++) {
    console.log(navSide.children("ul").children("li:nth-child(i)").offset().top);
}

但是，这样做的问题是我得到了一个Uncaught Error: Syntax error, unrecognized expression: :nth-child。做我想做的事情的正确、最有效的方法是什么？

Answer 1

你可以使用each()循环

$('#nav li').each(function() {
  console.log($(this).offset().top);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav">
  <ul>
    <li>Li 1</li>
    <li>Li 2</li>
    <li>Li 3</li>
  </ul>
</nav>