ฉันจะรับ ID ขององค์ประกอบโดยใช้ jQuery ได้อย่างไร

<div id="test"></div>
<script>
  $(document).ready(function() {
    alert($('#test').id);
  });  
</script>

เหตุใดงานด้านบนจึงไม่ทำงานและฉันควรทำอย่างไร

วิธี jQuery:

$('#test').attr('id')

ในตัวอย่างของคุณ:

$(document).ready(function() {
  console.log($('#test').attr('id'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"></div>

หรือผ่าน DOM:

$('#test').get(0).id;

หรือแม้กระทั่ง :

$('#test')[0].id;

และเหตุผลที่อยู่เบื้องหลังการใช้งาน$('#test').get(0)ใน JQuery หรือแม้แต่$('#test')[0]เป็น$('#test')ตัวเลือก JQuery และส่งกลับอาร์เรย์ () ของผลลัพธ์ที่ไม่ได้เป็นองค์ประกอบเดียวโดยการใช้งานเริ่มต้น

ทางเลือกสำหรับ DOM selector ใน jquery คือ

$('#test').prop('id')

ซึ่งแตกต่างจาก.attr()และ$('#test').prop('foo')คว้าระบุ DOM fooคุณสมบัติในขณะที่$('#test').attr('foo')การคว้า HTML ระบุfooแอตทริบิวต์และคุณสามารถหารายละเอียดเพิ่มเติมเกี่ยวกับความแตกต่างที่นี่

$('selector').attr('id')จะส่งคืนรหัสขององค์ประกอบที่ตรงกันแรก การอ้างอิง

หากชุดที่จับคู่ของคุณมีมากกว่าหนึ่งองค์ประกอบคุณสามารถใช้ตัว.each วนซ้ำทั่วไปเพื่อส่งกลับอาร์เรย์ที่มีรหัสแต่ละตัว:

var retval = []
$('selector').each(function(){
  retval.push($(this).attr('id'))
})
return retval

หรือถ้าคุณยินดีที่จะได้รับทรุดโทรมเล็ก ๆ น้อย ๆ ที่คุณสามารถหลีกเลี่ยงเสื้อคลุมและใช้ทางลัด.map

return $('.selector').map(function(index,dom){return dom.id})

idElementเป็นทรัพย์สินของแบบ HTML อย่างไรก็ตามเมื่อคุณเขียน$("#something")มันจะส่งคืนวัตถุ jQuery ที่ล้อมรอบองค์ประกอบ DOM ที่ตรงกัน หากต้องการรับองค์ประกอบ DOM ที่ตรงกันก่อนให้โทรget(0)

$("#test").get(0)

ในองค์ประกอบพื้นฐานนี้คุณสามารถเรียก id หรือคุณสมบัติหรือฟังก์ชัน DOM อื่น ๆ

$("#test").get(0).id

นั่นเป็นสาเหตุที่idรหัสของคุณไม่ทำงาน

หรือใช้attrวิธีการของ jQuery เป็นคำตอบอื่น ๆ ที่แนะนำให้รับidคุณลักษณะขององค์ประกอบที่ตรงกันแรก

$("#test").attr("id")

คำตอบข้างต้นนั้นยอดเยี่ยม แต่เมื่อ jQuery วิวัฒนาการขึ้นมา .. ดังนั้นคุณสามารถทำได้:

var myId = $("#test").prop("id");

$.fn.extend({
    id : function() {
        return this.attr('id');
    }
});

alert( $('#element').id() );

แน่นอนว่าต้องใช้รหัสตรวจสอบบางอย่าง แต่ติดตั้งง่าย!

.idไม่ใช่ฟังก์ชัน jquery ที่ถูกต้อง คุณจำเป็นต้องใช้.attr()ฟังก์ชั่นเพื่อเข้าถึงคุณลักษณะที่องค์ประกอบมีอยู่ คุณสามารถใช้.attr()ทั้งเปลี่ยนค่าแอตทริบิวต์โดยการระบุสองพารามิเตอร์หรือรับค่าโดยการระบุหนึ่ง

http://api.jquery.com/attr/

หากคุณต้องการได้รับ ID ขององค์ประกอบสมมติว่าโดยตัวเลือกคลาสเมื่อเหตุการณ์ (ในกรณีคลิกเหตุการณ์) ถูกไล่ออกในองค์ประกอบเฉพาะนั้นแล้วต่อไปนี้จะทำงาน:

 $('.your-selector').click(function(){
       var id = $(this).attr('id');
 });

$('#test').attr('id') ในตัวอย่างของคุณ:

<div id="test"></div>

$(document).ready(function() {
    alert($('#test').attr('id'));
}); 

ดูเหมือนว่ายังไม่มีวิธีแก้ปัญหาและต้องการเสนอวิธีแก้ไขปัญหาของฉันเองซึ่งเป็นการขยายตัวต้นแบบ JQuery ฉันวางสิ่งนี้ลงในไฟล์ Helper ที่โหลดหลังจากไลบรารี JQuery ดังนั้นการตรวจสอบwindow.jQuery

if (window.jQuery) {
    $.prototype.id = function () {
        if (this.length > 1) {
            var val = [];
            this.each(function (idx, el) {
                val.push($(el).id());
            });
            return val;
        } else {
            return this.attr('id');
        }
    }
}

อาจไม่สมบูรณ์ แต่เป็นการเริ่มต้นที่จะรวมเข้ากับห้องสมุด JQuery

ส่งคืนค่าสตริงเดี่ยวหรือ Array ของค่าสตริง อาร์เรย์ของค่าสตริงใช้สำหรับเหตุการณ์ที่มีการใช้ตัวเลือกหลายองค์ประกอบ

$('#test')ส่งคืนวัตถุ jQuery ดังนั้นคุณไม่สามารถใช้เพียงobject.idเพื่อให้ได้มันId

คุณจำเป็นต้องใช้$('#test').attr('id')ซึ่งจะคืนค่าIDองค์ประกอบที่คุณต้องการ

สิ่งนี้สามารถทำได้ดังนี้

$('#test').get(0).id ซึ่งเท่ากับ document.getElementById('test').id

อาจมีประโยชน์สำหรับผู้อื่นที่พบหัวข้อนี้ รหัสด้านล่างจะใช้งานได้ถ้าคุณใช้ jQuery แล้ว ฟังก์ชันจะส่งคืนตัวระบุเสมอ หากองค์ประกอบไม่มีตัวระบุฟังก์ชันจะสร้างตัวระบุและผนวกสิ่งนี้เข้ากับองค์ประกอบ

var generatedIdCounter = 0;

$.fn.id = function() {
    var identifier = this.attr('id');

    if(!identifier) {
        generatedIdCounter++;
        identifier = 'isGenerated_' + generatedIdCounter;

        this.attr('id', identifier);
    }

    return identifier;
}

วิธีใช้:

$('.classname').id();

$('#elementId').id();

$('tagname').attr('id');

ใช้รหัสข้างต้นคุณจะได้รับ ID

นี่เป็นคำถามเก่าแต่ในปี 2015อาจใช้งานได้จริง:

$('#test').id;

และคุณยังสามารถทำการมอบหมาย:

$('#test').id = "abc";

ตราบใดที่คุณกำหนดปลั๊กอิน JQuery ต่อไปนี้:

Object.defineProperty($.fn, 'id', {
    get: function () { return this.attr("id"); },
    set: function (newValue) { this.attr("id", newValue); }
});

น่าสนใจถ้าelementเป็นองค์ประกอบ DOM แล้ว:

element.id === $(element).id; // Is true!

เนื่องจากidเป็นคุณสมบัติคุณสามารถรับได้โดยใช้attrวิธีการ

นี่อาจเป็นองค์ประกอบรหัสคลาสหรือโดยอัตโนมัติโดยใช้คู่

------------------------
$(this).attr('id');
=========================
------------------------
$("a.remove[data-id='2']").attr('id');
=========================
------------------------
$("#abc1'").attr('id');
=========================

สำคัญ: หากคุณกำลังสร้างวัตถุใหม่ด้วย jQuery และเชื่อมเหตุการณ์คุณต้องใช้propและไม่ใช่attrเช่นนี้:

$("<div/>",{ id: "yourId", class: "yourClass", html: "<span></span>" }).on("click", function(e) { alert($(this).prop("id")); }).appendTo("#something");

ในที่สุดนี้จะแก้ปัญหาของคุณ:

สมมติว่าคุณมีปุ่มหลายปุ่มบนหน้าหนึ่งและคุณต้องการเปลี่ยนปุ่มใดปุ่มหนึ่งด้วย jQuery Ajax (หรือไม่ใช่ ajax) ขึ้นอยู่กับ ID ของพวกเขา

ให้บอกด้วยว่าคุณมีปุ่มประเภทต่าง ๆ มากมาย (สำหรับแบบฟอร์มการอนุมัติและเพื่อวัตถุประสงค์แบบเดียวกัน) และคุณต้องการให้ jQuery ปฏิบัติต่อปุ่ม "ชอบ" เท่านั้น

นี่คือรหัสที่ใช้งานได้: jQuery จะจัดการเฉพาะปุ่มที่อยู่ในคลาส. cls-hlpb โดยจะใช้รหัสของปุ่มที่คลิกและจะเปลี่ยนตามข้อมูลที่มาจาก ajax

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
<script>
$(document).ready(function(){
$(".clshlpbtn").on('click',function(e){
var id = $(e.target).attr('id');
 alert("The id of the button that was clicked: "+id);
$.post("demo_test_post.asp",
    {
      name: "Donald Duck",
      city: "Duckburg"
    },
    function(data,status){

    //parsing the data should come here:
    //var obj = jQuery.parseJSON(data);
    //$("#"+id).val(obj.name);
    //etc.

    if (id=="btnhlp-1")
       $("#"+id).attr("style","color:red");
    $("#"+id).val(data);
    });
});




});
</script>
</head>
<body>

<input type="button" class="clshlpbtn" id="btnhlp-1" value="first btn">    </input>
<br />
<input type="button" class="clshlpbtn" id="btnhlp-2" value="second btn">    </input>
<br />
<input type="button" class="clshlpbtn" id="btnhlp-9" value="ninth btn">    </input>

</body>
</html>

รหัสถูกนำมาจาก w3schools และเปลี่ยน

<html>
<head>
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
<?php
    // include Database connection file 
    include("db_connection.php");

    // Design initial table header 
    $data = '<table class="table table-bordered table-striped">
                        <tr>
                            <th>No.</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email Address</th>
                            <th>Update</th>
                            <th>Delete</th>
                        </tr>';
    $query = "SELECT * FROM users";
    if (!$result = mysqli_query($con, $query)) {
        exit(mysqli_error($con));
    }
    // if query results contains rows then featch those rows 
    if(mysqli_num_rows($result) > 0)
    {
        $number = 1;
        while($row = mysqli_fetch_assoc($result))
        {
            $data .= '<tr>
                <td>'.$number.'</td>
                <td>'.$row['first_name'].'</td>
                <td>'.$row['last_name'].'</td>
                <td>'.$row['email'].'</td>
                    <td><button onclick="DeleteUser('.$row['id'].')" class="btn btn-danger">Delete</button>
                </td>
            </tr>';
            $number++;
        }
    }

    else
    {
        // records now found 
        $data .= '<tr><td colspan="6">Records not found!</td></tr>';
    }

    $data .= '</table>';
    echo $data;
?>

<script type="text/javascript">

    function DeleteUser(id) {
    var conf = confirm("Are you sure, do you really want to delete User?");
    if (conf == true) {
        $.ajax({
                    url:'deleteUser.php',
                    method:'POST',
                    data:{
                        id:id
                    },
            success:function(data){
                      alert('delete successfully');
                   }




}
});

deleteUser.php

<?php
// check request
if(isset($_POST['id']) && isset($_POST['id']) != "")
{
    // include Database connection file
    include("db_connection.php");

    // get user id
    $user_id = $_POST['id'];

    // delete User
    $query = "DELETE FROM users WHERE id = '$user_id'";
    if (!$result = mysqli_query($con, $query)) {
        exit(mysqli_error($con));
    }
}
?>

มันไม่ตอบ OP แต่อาจน่าสนใจสำหรับคนอื่น ๆ : คุณสามารถเข้าถึง.idฟิลด์ในกรณีนี้:

$('#drop-insert').map((i, o) => o.id)