• Skip to primary navigation
  • Skip to main content

The Programming Expert

Solving All of Your Programming Headaches

  • Home
  • Learn to Code
    • Python
    • JavaScript
  • Code Snippets
    • HTML
    • JavaScript
    • jQuery
    • PHP
    • Python
    • SAS
    • Ruby
  • About
  • Write for Us
You are here: Home / jQuery / Get nth Child with jQuery

Get nth Child with jQuery

December 6, 2021 Leave a Comment

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:

Click Me to Show 3rd Paragraph’s Text

This is paragraph 1

This is paragraph 2

This is paragraph 3

The 3rd paragraph’s text is:

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:

Click Me to Highlight Even Paragraphs
Click Me to Highlight Odd Paragraphs
Click Me to Highlight Every 3rd Paragraph Starting with the 2nd

This is paragraph 1

This is paragraph 2

This is paragraph 3

This is paragraph 4

This is paragraph 5

This is paragraph 6

This is paragraph 7

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.

Other Articles You'll Also Like:

  • 1.  Add Style to HTML Element Using jQuery
  • 2.  jQuery mousedown – An Interactive Example of the jQuery mousedown Method
  • 3.  Using jQuery to Set the Id of a Div
  • 4.  jQuery clone – Making a Copy of an Element
  • 5.  Using jQuery to Add Option to Select List
  • 6.  Using jQuery to Change the Text Color of a Paragraph
  • 7.  jQuery first() – Get the First Element
  • 8.  jQuery val Method – Get the Value from an Input Field
  • 9.  jQuery insertBefore – Insert Element Before Another Element
  • 10.  jQuery focus – Changing Form Styles with the focus() Method

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · The Programming Expert · About · Privacy Policy