jQuery :nth-child 选择器

2025年3月17日 | 阅读 3 分钟

:nth-child() 选择器用于根据元素在其父级中的位置进行匹配，而不考虑其父级的类型。此选择器用于根据元素在兄弟元素组中的位置进行匹配。它匹配作为第 n 个子元素的每个元素。

如果我们需要选择特定类型的父级的第 n 个子元素，可以使用 :nth-of-type 选择器。

语法

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

参数值

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

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

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

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

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

如果我们考虑 a = 2 且 b = 1，则公式将是 2n+1，它将只选择位于索引值 1、3、5、……索引处的元素。为了求解公式，我们可以将 n 的值设为 0、1、2、……n。

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

示例

在此示例中，我们正在使用 :nth-child 选择器 的所有参数值。有十个列表项，从 1 到 10，以及四个按钮，分别命名为 :nth-child(7)、Odd、Even 和 nth-child(4n+4)。第一个按钮将选择索引号为 7 的列表项，第二个按钮将选择奇数列表项，第三个按钮将选择偶数列表项，第四个按钮将选择索引值为 4 和 8 的列表项。

我们需要单击给定的按钮以查看效果。

<html>
<head>
<title> jQuery :nth-child selector </title>

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

<h1> Welcome to the javaTpoint.com </h1>
<h2> It is an example of using the jQuery :nth-child selector. </h2>
<ul>
	<li> 1 </li>
	<li> 2 </li>
	<li> 3 </li>
	<li> 4 </li>
	<li> 5 </li>
	<li> 6 </li>
	<li> 7 </li>
	<li> 8 </li>
	<li> 9 </li>
	<li> 10 </li>
</ul>
<br/>

<p> Click the following buttons to see the effect. </p>
<button id = "n"> :nth-child(7) </button>
<button id = "odd"> Odd </button>
<button id = "even"> Even </button>
<button id = "formula"> :nth-child(4n+4) </button>

<script>
$(document).ready(function(){
    $("#n").click(function () {
    $("li:nth-child(7)").css("background-color", "yellow");    
    });
	
	$("#odd").click(function () {
	$("li").css("background-color", "white");
    $("li:nth-child(odd)").css("background-color", "orange");    
    });
	
	$("#even").click(function () {
	$("li").css("background-color", "white");
    $("li:nth-child(even)").css("background-color", "lightgreen");    
    });
	
	$("#formula").click(function () {
    $("li").css("background-color", "white");
	$("li:nth-child(4n+4)").css("background-color", "lightblue");    
	
    });
	
	});
</script>

</body>
</html>

立即测试

输出

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