JQuery-从类的元素中获取属性值的列表

我有一个类 .object，它有一个名为 level的属性。我想得到一个列表的所有不同的值的 level在页面上，所以我可以选择最高的一个。

如果我这样做:

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

... 会给我一个值的列表，这些值是 level 属性的值吗？我想是的，但是你怎么做到的？

注意: 我不想选择一个 HTML 对象作为更常见的操作，相反，我想选择属性的值。

编辑: 为了得到最高的“水平”，我这样做了，但似乎没有工作。我现在就试试另一种建议的方法。

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


alert(highLevel);
68175 次浏览
小开

$(".object").attr("level") will just return the attribute of first the first .object element.

This will get you an array of all levels:

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

the selector

$(".object[level]")

will give you all the dom elements with class object and an attribute level.

Then you can just use the .each() method to iterate over the elements to get the highest value

小开

First part of the question, getting the attribute values into an array. See this question

jQuery get img source attributes from list and push into array

You would say

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

Second part of the question , you can use this technique to get the highest value

var maxValue = Math.max.apply( Math, levelArray );
小开 
<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>

I'm assuming markup like this:

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

For my code I get "1000" alerted to me.

Here's another solution, combining several of the other replies from harpo, lomaxx, and 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);
});
小开

You can extend the functionality of Jquery and add your own 'attrs' implementation.

Add the following lines of code to your JavaScript file:

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

Now you can get the list of level values by calling:

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

The jQuery utility $.map() provides a cleaner approach that returns an array of values.

let arr = $.map($('.object'), x => $(x).data('level'));


console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
<li class="object" data-level="1">HTML5 technically does not require closing li tags</li>
<li class="object" data-level="2">The Tidy function in SO code snippets do</li>
<li class="object" data-level="3">*shrug*</li>
</ol>


提交答案