jQuery get max width of child div's

Question

I need to get the max width(just the one width) of the child div in the wrapper div element

<div id="wrapper">  
    <div class="image"><img src="images/1.jpg"></div> 
    <div class="image"><img src="images/2.jpg"></div>  
    <div class="image"><img src="images/3.jpg"></div>  
    <div class="image"><img src="images/4.jpg"></div>  
    <div class="image"><img src="images/5.jpg"></div>  
    <div class="image"><img src="images/6.jpg"></div> 
</div>

Answer 1

Math.max.apply(Math, $('.image').map(function(){ return $(this).width(); }).get());

Per suggestion, I'll break that down:

$('.image').map(function(){
   return $(this).width();
}).get();

The above gets a list of all .image divs and converts it into a list of their widths. So you'll now have something like: [200, 300, 250, 100, 400]. The .get(), as Felix pointed out, is necessary to get an actual Array instead of a jQuery array.

Math.max takes N arguments, so you have to call it as: Math.max(200, 300, 250, 100, 400), which is what the Math.max.apply piece accomplishes.

Answer 2

A not-so-difficult example function to consider; not as elegant as cwolves, but probably easier to follow if you're a beginner.

function getMaxChildWidth(sel) {
    max = 0;
    $(sel).children().each(function(){
        c_width = parseInt($(this).width());
        if (c_width > max) {
            max = c_width;
        }
    });
    return max;
}

http://jsfiddle.net/userdude/rMSuJ/1/

Answer 3

I like this approach because it hits the sweet spot (IMHO) between core readability and shortness:

var max_w = 0;
$('#wrapper div.image').each(function() {
    max_w = Math.max(max_w, parseInt($(this).width()));
})

YMMV of course.