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

あなたは、あなたがそのようnth-child使用カント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

を使用することができます。 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>