:nth-of-type()是 jQuery的内置选择器,用于选择指定父元素的所有第 n 个子元素。
句法 :
parent_name : nth-of-type(n|even|odd|algebric equation)
参数:它需要一个参数n |甚至|奇数|代数方程。
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. |
笔记:
- 不同部分或部门中的子元素被区别对待
即,索引从头开始。 - 在 mn + c 中,n 从值 0 开始。
示例 1:使用n作为参数。
Geeks 1
Geeks 2
geeks for geeks 1
geeks for geeks 2
geeks for geeks 3
Geeks 3
输出:
在上面的例子中,索引 2 处的子元素(父元素是 p 标签)被格式化为绿色,即“Geeks 2”和“geeks for geeks 2”。
示例 2:使用even作为参数。
Geeks 1
Geeks 2
geeks for geeks 1
geeks for geeks 2
geeks for geeks 3
Geeks 3
输出:
在上面的例子中,偶数索引处的子元素(父元素是 p 标签)被格式化为绿色背景,即“Geeks 2”和“geeks for geeks 2”。
示例 3:使用奇数作为参数。
Geeks 1
Geeks 2
geeks for geeks 1
geeks for geeks 2
geeks for geeks 3
Geeks 3
输出:
在上面的例子中,奇数索引处的子元素(父元素是 p 标签)被格式化为红色,即“Geeks 1”、“geeks for geeks 1”、“geeks for geeks 3”和“Geeks 3”。
示例 4:使用代数方程作为参数。
Geeks 1
Geeks 2
geeks for geeks 1
geeks for geeks 2
geeks for geeks 3
geeks for geeks 4
geeks for geeks 5
Geeks 3
输出:
在上面的例子中,索引值等于 3n + 2(父元素是 p 标签)的子元素被格式化为绿色,即“Geeks 2”、“geeks for geeks 2”、“geeks for geeks 5”。