Numbered child (:nth-child(n/even/odd/expr))

Syntax

$(':nth-child(n/even/odd/expr)')

Description

Select all elements that are the nth child of their parent.

Examples

Selector	Selects
$('li:nth-child(2)')	all <li> elements that are the second child of their parent
$('p:nth-child(odd)')	all <p> elements that are an odd-numbered child of their parent (first, third, fifth, and so on)
$('.myclass:nth-child(3n+2)')	all elements with the class myclass that are the (3n+2)th child of their parent (second, fifth, eighth, and so on)

Given the following HTML code:

 
<div>
 <h2></h2>
 <p></p>
 <h2></h2>
 <p></p>
 <p></p>
</div>

$('p:nth(1)') selects the second because numbering for :nth(n) starts with 0
$('p:nth-child(1)') selects nothing because there is no element that is the first child of its parent
$('p:nth(2)') selects the third
$('p:nth-child(2)') selects the first because it is the second child of its parent

:nth-child(n) can take even or odd.

For

 
<div>
 <h2></h2>
 <p></p>
 <h2></h2>
 <p></p>
 <p></p>
</div>

$('p:nth-child(even)') selects the first and third because they are children 2 and 4 (both even numbers) of their parent.

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("ul li:nth-child(2)").append("<span> - 2nd!</span>");
        });
    </script>
  </head>
  <body>
    <body>
      <div>
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
      </div>
      <div>
        <ul>
            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>G</li>
            
        </ul>
      </div>
      <div>
        <ul>
            <li>H</li>
            <li>I</li>
            <li>J</li>
            <li>K</li>
        </ul>
      </div>

    </body>
</html>

Click to view the demo

Home
JavaScript Book
jQuery

Selector: