jQuery :nth-of-type() Selector
The :nth-of-type() is an inbuilt selector in jQuery, used to select all the nth-child elements of the specified parent.
Syntax:
parent_name : nth-of-type(n|even|odd|algebraic equation)
Parameters: It takes a parameter n | even | odd | algebraic 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. |
| algebraic 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 are treated differently
i.e, indexing starts from the beginning. - In mn + c, n is starting from value 0.
Example 1: Using n as a parameter.
HTML
<!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.
HTML
<!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.
HTML
<!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 algebraic equation as a parameter.
HTML
<!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”.
Please Login to comment...