jquery nhận các thuộc tính

Question

Tôi đang tìm cách lấy các thuộc tính tùy chỉnh của một phần tử với jquery.

<span id='element' data-type='foo' data-sort='bar'></span> 

Tôi đang tìm cách nhận: ["data-type", "data-sort"] làm mảng.

Bất kỳ ai biết cách thực hiện việc này?

Cảm ơn.

Answer 1

Bạn có thể sử dụng vòng lặp .attributes DOM property và thông qua, như thế này:

var arr = document.getElementById('element').attributes, attributes = []; 
//or if you're inside a jQuery loop, just use this.attributes 
//e.g.: var arr = $("span").get(0).attributes, attributes = []; 
for(var i = 0; i < arr.length; i++) { 
    if(arr[i].name.indexOf("data-") == 0) //only ones starting with data- 
    attributes.push(arr[i].name); 
} 
alert(attributes); ​//use it for something, result is ["data-type", "data-sort"] 

You can see a working demo here, ngoài việc lấy phần tử, đây không phải là jQuery cụ thể nào cả, vì vậy bạn có thể dễ dàng loại bỏ nó hoàn toàn nếu cần thiết.

Answer 2

chỉ đơn giản là $('#element').attr('data-type'); và $('#element').attr('data-sort');

xin lỗi, trả lời trước khi đọc toàn bộ câu hỏi: -/không nghĩ rằng có một xây dựng trong chức năng để có được chúng như một mảng, được là người đầu tiên, có được thứ hai và sau đó xây dựng mảng theo cách thủ công.

Answer 3

Chỉ cần để tham khảo cho những người sử dụng jQuery, thuộc tính bắt đầu bằng 'đĩa dữ liệu' có thể được truy cập bởi data() chức năng:

<span id='element' data-type='foo' data-sort='bar'></span> 

var el = $('#element'); 
return [el.data('type'), el.data('sort')]; 

Một số trình duyệt đang bắt đầu để lưu trữ những theo những cách tiên tiến hơn (lưu trữ dữ liệu địa phương?) và những người khác thì không, nhưng có vẻ như nó hoạt động khá tốt. Lưu ý rằng trình duyệt tính hợp lệ của W3C không thích các thuộc tính expando như thế này, nhưng tôi nghĩ có một số đề xuất để chuẩn hóa điều này để chúng xác thực. Lần cuối cùng tôi nghiên cứu cách tốt nhất để lưu trữ dữ liệu với một phần tử, sử dụng data-key như thế này là một trong những người chiến thắng trong số các chuyên gia.

Một cách khác để tôi chạy qua để buộc dữ liệu vào một yếu tố là để chèn một thẻ script ngay trước hoặc sau khi nguyên tố này, cho nó một kiểu khác hơn text/javascript như:

<script id="templatedata" type="text/html"> 
    <span>23</span> 
    <span>Alfred</span> <!-- I'm sure you can get more creative than I'm being here --> 
</script> 

này sẽ không được hiển thị trong trình duyệt và bạn vẫn có thể nhận được HTML trong đó qua $('#templatedata').html();. Điều này vẫn có thể có vấn đề của nó như về mặt kỹ thuật nó không chính xác, nhưng nếu xác nhận HTML W3C là quan trọng với bạn nó có thể là một lựa chọn khả thi.

Answer 4

Bạn có thể sử dụng mã này, rất đơn giản để tìm kiếm. Chỉ cần bao gồm jquery không có gì khác .. Simple Jquery Filter