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

Answer 2

你不能使用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>