jQuery: How to calculate the maximal attribute value of all matched elements?

Question

Consider the following HTML:

<div class="a" x="6"></div>
<div class="a" x="9"></div>
<div class="a" x="2"></div>
...
<div class="a" x="8"></div>

How would you find the maximal x value of all .a elements ?

Assume that all x values are positive integers.

Answer 1

Just loop over them:

var maximum = null;

$('.a').each(function() {
  var value = parseFloat($(this).attr('x'));
  maximum = (value > maximum) ? value : maximum;
});

Answer 2

I got another version:

var numbers = $(".a").map(function(){
    return parseFloat(this.getAttribute('x')) || -Infinity;
}).toArray();

$("#max").html(Math.max.apply(Math, numbers));

This uses the map function to extract the values of the x-Attributes, converts the object into an array and provides the array elements as function parameters to Math.max

The Math.max trick was stolen from http://ejohn.org/blog/fast-javascript-maxmin/

UPDATE

add "|| -Infinity" to process the case correctly, when no attribute is present. See fiddle of @kubedan