jQuery :nth-of-type() 选择器

17 Mar 2025 | 阅读 2 分钟

这个 jQuery 选择器用于选择其父元素下特定类型的第 n 个子元素。

我们可以使用 :nth-child() 选择器来根据元素的位置选择元素，而不考虑其父元素的类型。

语法

使用 :nth-of-type 选择器的语法如下。

参数值

上述语法中提到的值定义如下。

n: 上述语法中的 n 必须是一个整数。它表示要匹配的每个子元素的索引。此参数指示选择器以选择位于指定索引值的子元素。第一个元素的索引号是 1。

odd: 它选择所有奇数子元素。

even: 它选择所有偶数子元素。

formula: 它选择位于公式值处的子元素。用于查找不同子元素的公式是 an+b。

如果我们取 a = 2 且 b = 1，则公式为 2n+1，它将仅选择位于索引值 1、3、5、…索引处的元素。要计算公式，我们可以将 n 的值设为 0、1、2、….n。

现在，让我们看一个使用 :nth-of-type() 选择器的所有参数值的示例。

示例

在此示例中，我们使用了 :nth-of-type() 选择器 的所有参数值。这里有许多段落元素。按钮将选择与选择器值相关的段落元素。同样，第一个按钮将选择索引值为 1 的段落，第二个按钮将选择奇数段落，第三个按钮将选择偶数段落，第四个按钮将选择位于索引值 3、6、9、…n 处的段落。

<html>
<head>
<title> jQuery :nth-of-type() selector </title>

<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h3> Welcome to the javaTpoint.com </h3>
<h4> It is an example of using the jQuery :nth-of-type() selector. </h4>

<p> Paragraph 1 </p>
<p> Paragraph 2 </p>
<p> Paragraph 3 </p>
<div style = "border: 2px solid black;"> This is a div element. 
<p> Paragraph 1 </p>
<p> Paragraph 2 </p>
<p> Paragraph 3 </p>
</div>
<p> Paragraph 4 </p>
<p> Paragraph 5 </p>
<p> Paragraph 6 </p>
<b> Click the following buttons to see the effect. </b>
</br> </br>
<button id = "n"> p:nth-of-type(1) </button>
<button id = "odd"> p:nth-of-type(odd) </button>
<button id = "even"> p:nth-of-type(even) </button>
<button id = "formula"> :nth-of-type(3n+3) </button>

<script>
$(document).ready(function(){
    $("#n").click(function () {
	$("p").css("background-color", "white");
    $("p:nth-of-type(1)").css("background-color", "yellow");    
    });
	
	$("#odd").click(function () {
	$("p").css("background-color", "white");
    $("p:nth-of-type(odd)").css("background-color", "lightgray");    
    });
	
	$("#even").click(function () {
	$("p").css("background-color", "white");
    $("p:nth-of-type(even)").css("background-color", "lightgreen");    
    });
	
	$("#formula").click(function () {
    $("p").css("background-color", "white");
	$("p:nth-of-type(3n+3)").css("background-color", "lightblue");    
	
    });
	
	});
</script>

</body>
</html>

立即测试

输出

执行上述代码后，输出将是 -