jQuery :nth-of-type() Selector
Last Updated :
06 Jul, 2023
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 >
< title >jQuery :nth-of-type() Selector</ title >
< 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 >
< p >geeks for geeks 1</ p >
< p >geeks for geeks 2</ p >
< p >geeks for geeks 3</ p >
</ section >
< 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 >
< title >jQuery :nth-of-type() Selector</ title >
< 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 >
< p >geeks for geeks 1</ p >
< p >geeks for geeks 2</ p >
< p >geeks for geeks 3</ p >
</ section >
< 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 >
< p >geeks for geeks 1</ p >
< p >geeks for geeks 2</ p >
< p >geeks for geeks 3</ p >
</ section >
< 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 >
< 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 >
< 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”.
Share your thoughts in the comments
Please Login to comment...