Tutorialspoint.dev

jQuery | :nth-of-type() Selector

The :nth-of-type() is an inbuilt selector in jQuery, used to select all the nth-child elements of specified parent.

Syntax :

 parent_name : nth-of-type(n|even|odd|algebric equation)

Parameters: It takes a parameter n | even | odd | algebric equation.

Value Description
n Select the child present at nth index (starting from 1). n must be an integer.
even Selects the child present at even index.
odd Selects the child present at odd index.
algebric equation Select the child present at the value of the equation, equation should be of type mn + c or mn – c, where m and c are constant values.

Note:

  • Child elements in different sections or divisions treated differently
    i.e, indexing starts from beginning.
  • In mn + c, n is starting from value 0.

Example-1: Using n as a parameter.



<!DOCTYPE html>
<html>
  
<head>
    <script src=
  </script>
    
  <script>
        $(document).ready(function() {
            $("p:nth-of-type(2)").css(
              "color", "green");
        });
    </script>
</head>
  
<body>
    <p>Geeks 1</p>
    <p>Geeks 2</p>
  
    <section>
  
    <!--Indices of child elements start
    from beginning inside new section-->
  
        <p>geeks for geeks 1</p>
        <p>geeks for geeks 2</p>
        <p>geeks for geeks 3</p>
    </section>
  
    <!--Outside the section the index of 
     the child element remain same as
      before section tag-->
    <p>Geeks 3</p>
  
</body>
  
</html>

Output:

In the above example, child element at index 2 (parent is p tag) formatted into green color i.e. “Geeks 2” and “geeks for geeks 2”.

Example-2: Using even as a parameter.

<!DOCTYPE html>
<html>
  
<head>
    <script src=
  </script>
   
  <script>
        $(document).mouseover(function() {
            $("p:nth-of-type(even)").css(
              "background-color", "green");
        });
    </script>
</head>
  
<body>
    <p>Geeks 1</p>
    <p>Geeks 2</p>
  
    <section>
        <!--Indices of child elements start 
        from beginning inside new section-->
        <p>geeks for geeks 1</p>
        <p>geeks for geeks 2</p>
        <p>geeks for geeks 3</p>
    </section>
  
    <!--Outside the section the index of the
     child element remain same as before section tag-->
    <p>Geeks 3</p>
  
</body>
  
</html>

Output:

In the above example, child element at even indices (parent is p tag) formatted into green color background i.e. “Geeks 2” and “geeks for geeks 2”.

Example-3: Using odd as a parameter.

<!DOCTYPE html>
<html>
  
<head>
    <script src=
  </script>
     
  <script>
        $(document).mouseover(function() {
            $("p:nth-of-type(odd)").css(
              "color", "red");
        });
    </script>
</head>
  
<body>
    <p>Geeks 1</p>
    <p>Geeks 2</p>
  
    <section>
        <!--Indices of child elements 
      start from beginning inside new section-->
        <p>geeks for geeks 1</p>
        <p>geeks for geeks 2</p>
        <p>geeks for geeks 3</p>
    </section>
  
    <!--Outside the section the index
        of the child element remain
        same as before section tag-->
    <p>Geeks 3</p>
  
</body>
  
</html>

Output:

In the above example, child element at odd indices (parent is p tag) formatted into red colour i.e. “Geeks 1”, “geeks for geeks 1”, “geeks for geeks 3” and “Geeks 3”.

Example-4: Using algebric equation as a parameter.

<!DOCTYPE html>
<html>
  
<head>
    <script src=
  </script>
    
  <script>
        $(document).mouseover(function() {
            $("p:nth-of-type(3n+2)").css(
              "color", "green");
        });
    </script>
</head>
  
<body>
    <p>Geeks 1</p>
    <p>Geeks 2</p>
  
    <section>
        <!--Indices of child elements
            start from beginning inside 
            new section-->
        <p>geeks for geeks 1</p>
        <p>geeks for geeks 2</p>
        <p>geeks for geeks 3</p>
        <p>geeks for geeks 4</p>
        <p>geeks for geeks 5</p>
    </section>
  
    <!--Outside the section the index 
        of the child element remain 
        same as before section tag-->
    <p>Geeks 3</p>
  
</body>
  
</html>

Output:

In the above example, child element at indices value equal to 3n + 2 (parent is p tag) formatted into green colour i.e. “Geeks 2”, “geeks for geeks 2”, “geeks for geeks 5”.



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter