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

更新時間：2021-09-01 10:43:46 來源：動力節(jié)點瀏覽8674次

使用jQueryattr()方法

您可以簡單地使用 jQueryattr()方法來獲取或設置元素的ID屬性值。

以下示例將在單擊按鈕時在警報框中顯示DIV元素的ID。

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Get ID of an Element</title>
<script src="https://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>

您還可以通過循環(huán)獲取具有相同類的多個元素的ID，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Get ID of Multiple Elements</title>
<script src="https://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 選擇器返回匹配元素的集合而不是單個元素。

以上就是動力節(jié)點小編介紹的"使用jQuery獲取元素的ID的方法"，希望對大家有幫助，想了解更多可查看 jQuery教程。動力節(jié)點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。

jQuery教程