Get nth Child with jQuery

To get the nth-child of a HTML element using jQuery, the simplest way is with the jQuery :nth-child() selector.

$("#div p:nth-child(n)");

Let’s say I have the following HTML:

<div id="div">
   <p>This is the first child of #div</p>
   <p>This is the second child of #div</p>
   <p>This is the third child of #div</p>
   <p>This is the fourth child of #div</p>
</div>

To get the nth child of the div, we can use the jQuery :nth-child() selector. If we wanted to get the 2nd child of the div, we can use the following Javascript code:

$("#div p:nth-child(2)");

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery("#div p:nth-child(2)");

How to Get the nth Child on Click using jQuery

Many times when creating a web page and the user experience, we want to change the elements when a user interacts with another element on the web page.

We can get the nth child of a HTML element using jQuery very easily by combining the :nth-child() selector with a click event.

Let’s say we have the following HTML code and we want to show the text of the 3rd paragraph in a span. We will change the text in the span below on click.

<div id="div">
    <div id="click-me">Click Me to Show 3rd Paragraph's Text</p>
    <p>This is paragraph 1</p>
    <p>This is paragraph 2</p>
    <p>This is paragraph 3</p>
    <p>The 3rd paragraph's text is: <span id="selected-value"></span></p>
</div>

We can utilize the jQuery :nth-child() selector, and jQuery text() method to get the text of the paragraph, and value of the selected option.

Below is the Javascript code which will allow the user to be able to get the text of the 3rd paragraph and set the span text using jQuery

$("#click-me").click(function(){
    $("#selected-value").text($("#div p:nth-child(3)").text());
}); 

The final code and output for this example of how to get the 3rd child of a div using jQuery and Javascript is below:

Code Output:

Full Code:

<div class="html-code-output">
<div id="click-me">Click Me to Show 3rd Paragraph's Text</div>
<div id="div">
    <p>This is paragraph 1</p>
    <p>This is paragraph 2</p>
    <p>This is paragraph 3</p>
    <p>The 3rd paragraph's text is: <span id="selected-value"></span></p>
</div>
</div>

<script>

$("#click-me").click(function(){
    $("#selected-value").text($("#div p:nth-child(3)").text());
});

</script>

Examples Using The jQuery nth Child Selector

So far in this article, you have seen how you can get a specific child in a HTML element.

Depending on the user experience you are aiming to create, you might want to get all elements in an element which satisfy some pattern- for example, all the even child elements, all the odd child elements, every 3rd element etc.

The jQuery :nth-child() selector allows us to pass these patterns in as the parameter and allows us to get the nth child based on this pattern.

If we want to get all the even child elements, we can pass “even” or “2n” as shown below:

$("#div p:nth-child(even)"); // gets the even child paragraphs of the div
$("#div p:nth-child(2n)"); // gets the even child paragraphs of the div

If we want to get all of the odd child elements, we can pass “odd” or “2n+1” as shown below:

$("#div p:nth-child(odd)"); // gets the odd child paragraphs of the div
$("#div p:nth-child(2n+1)"); // gets the odd child paragraphs of the div

If we want to get every 3rd child element starting with the 2nd child element, we can pass “3n+2” as shown below:

$("#div p:nth-child(3n+2)"); // gets every 3rd child paragraph starting with the 2nd child paragraph of the div

Below is a code demo where you can explore different ways of using the :nth-child() selector using jQuery and Javascript where you will change the background color of the different HTML elements depending on which button you click.

Code Output:

Full Code:

<div class="html-code-output">
<div id="click-me-1">Click Me to Highlight Even Paragraphs</div>
<div id="click-me-2">Click Me to Highlight Odd Paragraphs</div>
<div id="click-me-3">Click Me to Highlight Every 3rd Paragraph Starting with the 2nd</div>
<div id="div-1">
    <p>This is paragraph 1</p>
    <p>This is paragraph 2</p>
    <p>This is paragraph 3</p>
    <p>This is paragraph 4</p>
    <p>This is paragraph 5</p>
    <p>This is paragraph 6</p>
    <p>This is paragraph 7</p>
</div>
</div>

<script>

$("#click-me-1").click(function(){
    $("#div-1 p").css("background-color","#f5f5f5");
    $("#div-1 p:nth-child(even)").css("background-color","yellow");
});

$("#click-me-2").click(function(){
    $("#div-1 p").css("background-color","#f5f5f5");
    $("#div-1 p:nth-child(2n+1)").css("background-color","yellow");
});

$("#click-me-3").click(function(){
    $("#div-1 p").css("background-color","#f5f5f5");
    $("#div-1 p:nth-child(3n+2)").css("background-color","yellow");
});

</script>

Hopefully this article has been useful for you to understand how to use jQuery to get the nth child from a parent HTML element.