使用jQuery获取元素的ID的方法

更新时间：2021-09-01 10:43:46 来源：极悦浏览8453次

使用jQueryattr()方法

您可以简单地使用 jQueryattr()方法来获取或设置元素的ID属性值。

以下示例将在单击按钮时在警报框中显示DIV元素的ID。

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Get ID of an Element</title>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    div{
        padding: 20px;
        background: #abb1b8;
    }
</style>
<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var elmId = $("#test").attr("id");
        alert(elmId);
    });
});
</script>
</head>
<body>
    <div id="test">#text</div>
    <br>
    <button type="button" id="myBtn">Show Div ID</button>
</body>
</html>

您还可以通过循环获取具有相同类的多个元素的ID，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Get ID of Multiple Elements</title>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    div{
        padding: 20px;
        margin-bottom: 10px;
        background: #abb1b8;
    }
</style>
<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var idArr = [];
        $(".box").each(function(){
            idArr.push($(this).attr("id"));
        });
        
        // Join array elements and display in alert
        alert(idArr.join(", "));
    });
});
</script>
</head>
<body>
    <div class="box" id="boxOne">#boxOne</div>
    <div class="box" id="boxTwo">#boxTwo</div>
    <div class="box" id="boxThree">#boxThree</div>
    <button type="button" id="myBtn">Show ID List</button>
</body>
</html>

您还可以在使用基于从 0 开始的索引的类选择器时获取单个元素的 ID，例如，您可以使用$(".box").get(0).id或获取一组匹配元素中的第一个元素的 ID $(".box")[0].id。

类似地，要获取最后一个元素的 ID，您可以使用类似这样的东西，$(".box").get($(".box").length - 1).id或者$(".box")[$(".box").length - 1].id，因为 jQuery 选择器返回匹配元素的集合而不是单个元素。

以上就是极悦小编介绍的"使用jQuery获取元素的ID的方法"，希望对大家有帮助，想了解更多可查看 jQuery教程。极悦在线学习教程，针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识，让同学们更好更方便的学习和了解Java编程，感兴趣的同学可以关注一下。

jQuery教程