jQuery - nhận danh sách các giá trị thuộc tính từ các thành phần của một lớp

Question

Tôi có một lớp .object có thuộc tính được gọi là level. Tôi muốn có danh sách tất cả các giá trị khác nhau của level trên trang để tôi có thể chọn giá trị cao nhất.

Nếu tôi làm điều gì đó như:

$(".object").attr("level") 

... sẽ mà làm cho tôi một danh sách các giá trị mà là những giá trị của thuộc tính cấp độ? Tôi nghi ngờ không, nhưng sau đó làm thế nào để bạn làm điều gì đó như thế?

Lưu ý: Tôi không muốn chọn đối tượng HTML để thao tác như thông thường hơn, thay vào đó tôi muốn chọn giá trị của thuộc tính.

EDIT: Để có được "cấp độ" cao nhất tôi đã thực hiện việc này, nhưng có vẻ như nó không hoạt động. Tôi sẽ thử phương pháp được đề xuất khác ngay bây giờ.

var highLevel=0; 
$.each(".object[level]", function(i, value) { 
    if (value>highLevel) { 
     highLevel=value; 
    } 
}); 

alert(highLevel); 

Answer 1

$(".object").attr("level") sẽ chỉ trả về thuộc tính đầu tiên của phần tử .object đầu tiên.

Điều này sẽ giúp bạn có một mảng của tất cả level s:

var list = $(".object").map(function(){return $(this).attr("level");}).get(); 

Answer 2

chọn

$(".object[level]") 

sẽ cung cấp cho bạn tất cả các yếu tố dom với lớp object và một thuộc tính level.

Sau đó, bạn chỉ có thể sử dụng phương pháp .each() để lặp qua các yếu tố để có được giá trị cao nhất

Answer 3

phần đầu tiên của câu hỏi, nhận được các giá trị thuộc tính thành một mảng. Xem câu hỏi này

jQuery get img source attributes from list and push into array

Bạn sẽ nói

var levelArray = $('.object').map(function() { 
    return $(this).attr('level'); 
}).get(); 

phần thứ hai của câu hỏi, bạn có thể sử dụng this technique to get the highest value

var maxValue = Math.max.apply(Math, levelArray); 

Answer 4

<script type="text/javascript"> 
var max = 0; 
jQuery(document).ready(function(){ 
    jQuery('.object[level]').each(function(){ 
     var num = parseInt($(this).attr('level'), 10); 
     if (num > max) { max = num; } 
    }); 
    alert(max); 
}); 
</script> 

Tôi giả định đánh dấu như thế này:

<div class="object" level="1">placeholder</div> 
<div class="object" level="10">placeholder</div> 
<div class="object" level="20">placeholder</div> 
<div class="object" level="1000">placeholder</div> 
<div class="object" level="40">placeholder</div> 
<div class="object" level="3">placeholder</div> 
<div class="object" level="5">placeholder</div> 

Đối với mã của tôi, tôi nhận được "1000" được thông báo cho tôi.

Dưới đây là một giải pháp khác, kết hợp một số các câu trả lời khác từ Harpo, lomaxx, và Kobi:

jQuery(document).ready(function(){ 
    var list = $(".object[level]").map(function(){ 
     return parseInt($(this).attr("level"), 10); 
    }).get(); 
    var max = Math.max.apply(Math, list); 
    alert(max); 
}); 

Answer 5

Bạn có thể extend the functionality of Jquery và thêm thực hiện 'attrs' của riêng bạn.

Thêm các dòng mã sau vào tập tin JavaScript của bạn:

jQuery.fn.extend({ 
    attrs: function (attributeName) { 
     var results = []; 
     $.each(this, function (i, item) { 
      results.push(item.getAttribute(attributeName)); 
     }); 
     return results; 
    } 
}); 

Bây giờ bạn có thể nhận được danh sách các giá trị mức độ bằng cách gọi:

$(".object").attrs("level")