Câu hỏi Làm thế nào tôi có thể nhận được ID của một phần tử bằng cách sử dụng jQuery?


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

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


1110
2017-07-13 17:11


gốc




Các câu trả lời:


Cách jQuery:

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

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

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

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

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] đó là $('#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ử duy nhấ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 DOM được chỉ định foo tài sản, trong khi $('#test').attr('foo') lấy HTML được chỉ định foo và bạn có thể tìm thêm chi tiết về sự khác biệt đây.


1816
2017-07-13 17:12



Nó làm tôi kinh ngạc mỗi khi jQuery không có phím tắt cho cái này $('#test').id(). - awe
Nó sẽ hiếm khi hữu ích vì id thường được mã hóa cứng vào HTML và JS. Khi bạn viết JS, bạn đã biết ID của một số phần tử, vì vậy bạn viết ID đó để truy lục phần tử đó. Bạn hiếm khi cần phải nhận được ID của một phần tử theo chương trình. - daniel1426
ít khi? câu hỏi này có 112106 lượt xem :-) - Simon_Weaver
Thực hiện điều đó 164969 lần. Thêm vào bây giờ tôi đang ở đây. Tôi có mã khởi tạo biểu mẫu. Một vài trong số các biểu mẫu có các yêu cầu đặc biệt. tôi có thể tìm kiếm các yếu tố hình thức cụ thể để quyết định phải làm gì, nhưng tôi nghĩ rằng việc xác định biểu mẫu - do đó id của biểu mẫu - là cách hợp lý và chắc chắn nhất. - Slashback
Tại sao tôi cần phải lấy id của một phần tử? Bởi vì tôi có một trình xử lý sự kiện gắn liền với một lớp các phần tử và tôi cần biết yếu tố cụ thể nào đã kích hoạt sự kiện. Tôi hy vọng tôi làm điều này đúng. - Buttle Butkus


$('selector').attr('id') sẽ trả lại id của phần tử được so khớp đầu tiên. Tài liệu tham khảo.

Nếu bộ so khớp của bạn chứa nhiều phần tử, bạn có thể sử dụng thông thường .each  người lặp để 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 chút grittier, bạn có thể tránh các wrapper và sử dụng .map  đường tắt.

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

70
2017-07-13 17:13



BTW, tôi nghĩ retval.push($(this).attr('id')) có thể được viết retval.push(this.id) - Darren Cook
Nếu bạn cần một thuộc tính của dữ liệu HMTL5 - ** sau đó sử dụng một cái gì đó như thế này: return $('.selector').map(function(i, dom){ return $(dom).attr('data-id'); }) - revoke
Thuộc tính .selector không được dùng trong jQuery 1.7 và chỉ được duy trì ở mức cần thiết để hỗ trợ .live () trong plugin jQuery Migrate. Thuộc tính này không bao giờ là chỉ báo đáng tin cậy của bộ chọn có thể được sử dụng để lấy tập hợp các phần tử hiện có trong bộ jQuery, nơi nó là thuộc tính, vì các phương thức truyền tải tiếp theo có thể đã thay đổi tập hợp. - Andrew Day


id là thuộc tính của 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ọi get(0)

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

Trên phần tử gốc 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 id không hoạt động trong mã của bạn.

Ngoài ra, hãy sử dụng jQuery attr phương pháp như câu trả lời khác gợi ý để có được id thuộc tính của phần tử khớp đầu tiên.

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

37
2017-07-13 17:16





Các câu trả lời ở trên rất tuyệt, nhưng khi jquery tiến hóa .. vì vậy bạn cũng có thể làm:

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

24
2017-12-05 16:46



Trên thực tế, đây là cách khấu hao để thực hiện việc này: api.jquery.com/attr - cjbarth
@cjbarth attr() đã được thêm vào 1.0 và prop() đã được thêm vào 1.6, vì vậy tôi giả sử nhận xét của bạn là prop() là cách mới. - Erik Philips
@ErikPhilips Tôi tin rằng, thay vì cách cũ và cách mới, nó phụ thuộc vào việc bạn quan tâm đến đầu ra ban đầu khi trang được tải (attr) hoặc có khả năng được sửa đổi bởi tập lệnh (prop). Nếu bạn không thực sự sửa đổi id thuộc tính của bất kỳ phần tử nào sử dụng tập lệnh phía máy khách, sau đó prop và attr là giống hệt nhau. - AntonChanning


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

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

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


20
2017-09-25 13:15



Có bạn đi, cho những người rên rỉ về jQuery không có một phương thức .id ()! - Jacob McKay


.id không phải là hàm jquery hợp lệ. Bạn cần sử dụng .attr() để truy cập các thuộc tính mà một phần tử sở hữu. Bạn có thể dùng .attr() cho cả hai thay đổi 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 giá trị.

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


10
2017-07-13 17:17





Nếu bạn muốn lấy ID của một phần tử, hãy nói bởi một bộ 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ì sau đây sẽ thực hiện công việc:

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

7
2018-05-29 10:35





$('#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 để có được nó Id

bạn cần sử dụng $('#test').attr('id'), trả về yêu cầu của bạn ID củ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


5
2017-07-13 17:16



.. và cũng $('#test')[0].id đó là giống như .get(0) - Gabriele Petrioli


Có thể hữu ích cho những người khác tìm thấy chuỗi 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ó số nhận dạng thì hàm sẽ tạo ra số nhận dạng và thêm 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();

3
2018-02-17 10:18