jQuery - get a list of values of an attribute from elements of a class

Question

I have a class called object which has an element 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);

Answer 1

$(".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();

Answer 2

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

Answer 3

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

http://stackoverflow.com/questions/2355025/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 );

Answer 4

UPDATED: improved

DEMO: http://jsbin.com/ajisi3/3/edit

$(function () {
 var highLevel;
  $('.object[level]').each( function( i , value ) {    
  if (parseInt($(this).attr('level')) > parseInt($('.object[level]').attr('level'))) 
  highLevel = $(this).attr('level');  
}); 
  alert( highLevel );
});

HTML

    <ul>    
      <li class="object" level="6"> 1st obj </li>    
        <li class="object" level="2"> 2th obj </li>    
       <li class="object" level="10"> 3th obj </li>    
      <li class="object" level="5"> 4th obj </li>    
   <li class="object" level="25"> 4th obj </li>    
 </ul>

Answer 5

<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);
});