Làm cách nào tôi có thể nhận được ID của một phần tử bằng jQuery?

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

Tại sao không làm việc trên, và tôi nên làm điều này như thế nào?

Cách jQuery:

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

Trong ví dụ của bạn:

$(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>

Hoặc thông qua DOM:

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

hoặc thậm chí:

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

và lý do đằng sau việc sử dụng $('#test').get(0)trong JQuery hoặc thậm chí $('#test')[0]đó $('#test')là bộ chọn JQuery và trả về một mảng () kết quả không phải là một phần tử bởi chức năng mặc định của nó

một thay thế cho bộ chọn DOM trong jquery là

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

khác với .attr()và $('#test').prop('foo')lấy thuộc tính DOM được chỉ định foo, trong khi $('#test').attr('foo')lấy foothuộc tính HTML được chỉ định và bạn có thể tìm thêm chi tiết về sự khác biệt ở đây .

$('selector').attr('id')sẽ trả về id của phần tử khớp đầu tiên. Tham khảo .

Nếu bộ so khớp của bạn chứa nhiều hơn một phần tử, bạn có thể sử dụng .each trình lặp thông thường để trả về một mảng chứa mỗi id:

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

Hoặc, nếu bạn sẵn sàng để có được một ít hơn, bạn có thể tránh trình bao bọc và sử dụng .map phím tắt .

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

idlà một tài sản của một html Element. Tuy nhiên, khi bạn viết $("#something"), nó trả về một đối tượng jQuery bao bọc (các) phần tử DOM phù hợp. Để lấy lại phần tử DOM phù hợp đầu tiên, hãy gọiget(0)

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

Trên phần tử riêng này, bạn có thể gọi id hoặc bất kỳ thuộc tính hoặc hàm DOM gốc nào khác.

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

Đó là lý do tại sao idkhông làm việc trong mã của bạn.

Ngoài ra, sử dụng attrphương thức của jQuery như các câu trả lời khác đề xuất để có được idthuộc tính của phần tử khớp đầu tiên.

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

Câu trả lời trên là rất tốt, nhưng khi jquery phát triển .. vì vậy bạn cũng có thể làm:

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

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

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

Tất nhiên một số mã kiểm tra cần thiết, nhưng dễ dàng thực hiện!

.idkhông phải là một hàm jquery hợp lệ. Bạn cần sử dụng .attr()hàm để truy cập các thuộc tính mà một phần tử sở hữu. Bạn có thể sử dụng .attr()để thay đổi cả một giá trị thuộc tính bằng cách chỉ định hai tham số hoặc nhận giá trị bằng cách chỉ định một tham số.

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

Nếu bạn muốn nhận ID của một phần tử, giả sử người chọn lớp, khi một sự kiện (trong trường hợp này là sự kiện nhấp chuột) được kích hoạt trên phần tử cụ thể đó, thì việc sau sẽ thực hiện công việc:

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

$('#test').attr('id') Trong ví dụ của bạn:

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

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

Chà, dường như chưa có một giải pháp nào và muốn đề xuất giải pháp của riêng tôi đó là một bản mở rộng của nguyên mẫu JQuery. Tôi đặt tệp này trong tệp Trình trợ giúp được tải sau thư viện JQuery, do đó kiểm trawindow.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');
        }
    }
}

Nó có thể không hoàn hảo nhưng đó là một khởi đầu để có thể đưa vào thư viện JQuery.

Trả về một giá trị chuỗi đơn hoặc Mảng giá trị chuỗi. Mảng các giá trị chuỗi, dành cho sự kiện bộ chọn đa yếu tố đã được sử dụng.

$('#test')trả về một đối tượng jQuery, vì vậy bạn không thể sử dụng đơn giản object.idđể lấy nóId

bạn cần sử dụng $('#test').attr('id'), nó trả về yêu cầu IDcủa phần tử

Điều này cũng có thể được thực hiện như sau,

$('#test').get(0).id bằng với document.getElementById('test').id

Có thể hữu ích cho những người khác tìm thấy chủ đề này. Mã dưới đây sẽ chỉ hoạt động nếu bạn đã sử dụng jQuery. Hàm trả về luôn là một định danh. Nếu phần tử không có định danh, hàm sẽ tạo định danh và nối phần tử này vào phần tử.

var generatedIdCounter = 0;

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

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

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

    return identifier;
}

Cách sử dụng:

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

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

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

Sử dụng mã ở trên, bạn có thể nhận được id.

Đây là một câu hỏi cũ, nhưng vào năm 2015, điều này thực sự có thể hoạt động:

$('#test').id;

Và bạn cũng có thể thực hiện các bài tập:

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

Miễn là bạn xác định plugin JQuery sau:

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

Thật thú vị, nếu elementlà một phần tử DOM, thì:

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

Vì id là một thuộc tính, bạn có thể lấy nó bằng cách sử dụng attrphương thức.

Đây có thể là id phần tử, lớp hoặc tự động sử dụng

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

Quan trọng: nếu bạn đang tạo một đối tượng mới bằng jQuery và ràng buộc một sự kiện, bạn PHẢI sử dụng prop và không attr , như thế này:

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

Điều này cuối cùng sẽ giải quyết vấn đề của bạn:

giả sử bạn có nhiều nút trên một trang và bạn muốn thay đổi một trong số chúng bằng jQuery Ajax (hoặc không phải ajax) tùy thuộc vào ID của chúng.

cũng có thể nói rằng bạn có nhiều loại nút khác nhau (cho các biểu mẫu, để phê duyệt và cho các mục đích tương tự) và bạn muốn jQuery chỉ xử lý các nút "thích".

Đây là một mã đang hoạt động: jQuery sẽ chỉ xử lý các nút thuộc lớp .cls-hlpb, nó sẽ lấy id của nút được nhấp và sẽ thay đổi nó theo dữ liệu xuất phát từ 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>

mã được lấy từ w3schools và thay đổi.

<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));
    }
}
?>

nó không trả lời OP, nhưng có thể thú vị với người khác: bạn có thể truy cập vào .idtrường trong trường hợp này:

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