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()循环

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

通过li元素迭代

2 个答案: