jQuery :nth-last-child() 选择器

:nth-last-child() 选择器用于根据元素在其兄弟元素中的位置选择一个或多个元素，计数从末尾开始。

此选择器采用特定数字、关键字（even 或 odd）或公式 (an + b) 来根据元素的位置进行匹配。

与从开头计数的:nth-child() 选择器不同，:nth-last-child() 从最后一个子元素向第一个子元素计数。

语法

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

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

参数

以下是上述语法的描述：

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

示例 1

在下面的示例中，我们使用“jQuery :nth-last-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-last-child(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-last-child(odd)").css("background-color", "yellow");
          $("li:nth-last-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-last-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-last-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

打印页面