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

jQuery 中的:nth-of-type() 选择器用于选择其父元素的第 n 个子元素（特定类型）。

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

语法

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

:nth-of-type(n|even|odd|formula)

参数

以下是上述语法的描述：

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

示例 1

在以下示例中，我们使用“jQuery :nth-of-type()”选择器来选择其父元素（<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-of-type(2)").css("background-color", "yellow");
        });
        </script>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</body>
</html>

执行上述程序后，第二个 <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-of-type(odd)").css("background-color", "yellow");
          $("li:nth-of-type(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-last-child(3n+2) 选择每三个段落中的一个，从第二个段落开始：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("p:nth-of-type(3n+2)").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

打印页面