jquery 获取最后一个元素

使用jQuery的：last()方法可以获取最后一个元素。

jQuery如何获得最后一个元素

在前端开发中，我们经常需要操作DOM元素，而获取某个元素的最后一个子元素是一个常见的需求，在jQuery中，我们可以使用.last()方法来轻松实现这个功能，本文将详细介绍如何使用jQuery的.last()方法来获取最后一个元素。

什么是jQuery的`.last()`方法？

jQuery的.last()方法是jQuery库提供的一个简便方法，用于获取匹配选择器的最后一个元素，与原生JavaScript的document.querySelector(':last-child')类似，但jQuery的.last()方法更加强大和灵活。

如何使用jQuery的`.last()`方法？

1、通过标签名获取最后一个元素

$("elementId").last();

2、通过类名获取最后一个元素

$(".className").last();

3、通过ID获取最后一个元素

$("elementId").last();

4、通过属性选择器获取最后一个元素

$("[attributeName='value']").last();

5、获取所有匹配选择器的最后一个元素

$("selector").last();

示例代码

下面我们通过一个简单的示例来演示如何使用jQuery的.last()方法，假设我们有一个HTML页面，其中包含两个列表项(<li>标签),我们想要获取这两个列表项中的最后一个。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery获取最后一个元素示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>
    <button id="getLastElement">获取最后一个列表项</button>
    <script src="main.js"></script>
</body>
</html>

JavaScript代码(main.js):

$(document).ready(function() {
    $("getLastElement").click(function() {
        // 通过标签名获取最后一个列表项
        var lastLi = $("li").last();
        alert("通过标签名获取的最后一个列表项：" + lastLi.text());
    });
});