迭代li元素

Iterating through li elements

本文关键字：元素 li 迭代      更新时间：2023-09-26

我的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。什么是正确的，最有效的方法来做我正在做的事情?

可以使用each() loop 

$('#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>

你不能那样使用nth-child。Jquery有each方法，可以让你轻松地遍历所有的li元素。

$('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>

相关文章：