jQuery - get a list of values of an attribute from elements of a class
JqueryCss SelectorsJquery Problem Overview
I have a class .object
which has an attribute called level
. I want to get a list of all the different values of level
on the page so I can select the highest one.
If I do something like:
$(".object").attr("level")
... will that get me a list of values that are the values of the level attribute? I suspect not, but then how do you do something like that?
Note: I don't want to select an HTML object for manipulation as is more common, rather I want to select values of the attribute.
EDIT: In order to get the highest "level" I have done this, but it doesn't seem to work. I will try the other suggested method now.
var highLevel=0;
$.each(".object[level]", function(i, value) {
if (value>highLevel) {
highLevel=value;
}
});
alert(highLevel);
Jquery Solutions
Solution 1 - Jquery
$(".object").attr("level")
will just return the attribute of first the first .object
element.
This will get you an array of all level
s:
var list = $(".object").map(function(){return $(this).attr("level");}).get();
Solution 2 - Jquery
First part of the question, getting the attribute values into an array. See this question
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 );
Solution 3 - Jquery
<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);
});
Solution 4 - Jquery
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
Solution 5 - Jquery
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")