jQuery :nth-child() 选择器

jQuery 中的:nth-child() 选择器用于选择其父元素的第 n 个子元素。

此方法允许您根据元素在其父元素的子元素列表中的位置来选择元素，使用“索引”和“公式”参数。

语法

以下是 jQuery :nth-child() 选择器的语法：

:nth-child(n|even|odd|formula)

参数

以下是上述语法的描述：

n: 选择其父元素的第 n 个子元素。索引从 1 开始，而不是 0。
even|odd: 分别选择偶数和奇数编号的子元素。
formula: 根据数学公式 (an+b) 选择元素。“a” 和“b” 是整数。

示例 1

在以下示例中，我们使用 jQuery :nth-child() 选择器来选择 <ul> 中的第 2 个 <li> 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("li:nth-child(2)").css("background-color", "yellow");
        });
        </script>
</head>
<body>
    <h2>List Example</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</body>
</html>

执行上述程序后，作为其父元素 (<ul>) 的第二个子元素的 <li> 将以黄色背景颜色突出显示。

示例 2

在此示例中，我们使用“odd”和“even”参数来选择奇数和偶数子 (<li>) 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("li:nth-child(odd)").css("background-color", "yellow");
          $("li:nth-child(even)").css("background-color", "lightblue");  
        });
    </script>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
</body>
</html>

执行程序后，奇数编号的列表项将以黄色背景颜色突出显示，偶数编号的项将以浅蓝色突出显示。

示例 3

p:nth-child(3n+1) 选择 <div> 元素内的每个第一个和后续的第三个段落：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("p:nth-child(3n+1)").css("background-color", "yellow");
        });
    </script>
</head>
<body>
<div>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <p>Paragraph 7</p>
    <p>Paragraph 8</p>
</div>
</body>
</html>

执行上述程序后，所选元素将以黄色背景颜色突出显示。

jquery_ref_selectors.htm

打印页面