• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
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.  Using jQuery to Change Label Text
  • 2.  Using jQuery to Add Class to HTML Element
  • 3.  Using jQuery to Set the Id of a Div
  • 4.  jQuery keydown Method
  • 5.  jQuery mouseleave – An Interactive Example of the mouseleave Method
  • 6.  Using jQuery to Remove Class from an HTML Element
  • 7.  Input Mask Phone Number Using jQuery
  • 8.  jQuery hover – An Interactive Example of the hover Method
  • 9.  Get the Height of a Div Using jQuery
  • 10.  Using jQuery to Change Background Color

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 *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

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