Calculate largest width of a set of elements using jQuery

Question

I have made a quick Jsbin: http://jsbin.com/ujabew/edit#javascript,html,live

What i'm trying to achieve is to find out which is the largest <section> out of the 3 from the link. So what i'd like is to, after the loop runs, is to have var width set to the largest possible number that any of the widths could be.

Code in progress posted in link

Joshia

Insteading of just adding the widths, keep track of the max width found so far. var max = 0; loop( if this.width > max then max = this.width); in bad pseudo-code. – Como

@MarcB That's pretty good psuedo code to me. – Reversible

Answer 1

Here:

var maxWidth = Math.max.apply( null, $( elems ).map( function () {
    return $( this ).outerWidth( true );
}).get() );

Live demo: http://jsfiddle.net/rM4UG/

Batholomew

Nice one. When I used this, it was for elements just inside the body that had margin: auto (for centering purposes). If you're doing something similar in IE (standards mode), remove the true being passed into the outerWidth function to remove margins from the calculation and you're golden! – Parthena

Answer 2

Fleshing out Marc B's comment, using Math.max():

$(document).ready(function(){
  var maxWidth = 0;
  $('.content ul li').each(function(){
    var itemWidth = $(this).outerWidth(true);
    maxWidth = Math.max(maxWidth, itemWidth)
  });
});

Kassa

Answer 3

I believe you want to look into the underscore library. Specifically, the max method

Aftershock

Answer 4

$(document).ready(function(){
  var maxWidth = 0;
  $('section').each(function(){
    w = $(this).outerWidth(true);      
    if ( w > maxWidth)
            maxWidth = w;
  });
});

Creepy

Answer 5

Change the .each() loop to this:

var thisWidth = $(this).outerWidth(true);

if (thisWidth > width) {
    width = thisWidth;
}

Maintenon

Answer 6

This was my idea:

$(document).ready(function () {
  var elements = $(".content ul li");
  var count = elements.length - 1;
  var width = [];

  elements.each(function (n) {
    width.push($(this).outerWidth(true));
    if (count == n) {
      width = Math.max.apply(Math, width);
    }
  });
});

I added the count of the number of elements and then runs the Math.max to get the largest number when each loop is done.

Neologism

Answer 7

I have just written a function regarding this. I thought it might help others. (jQuery)

$.fn.largerWidth = function () {    //function(p)  
                                    // where 'p' can be clientWidth or offsetWidth 
                                    // or anything else related to width or height
    var s = this,m;
    for (var i = 0; i < s.length; i++) {
        var w = s[i].offsetWidth;   // s[i][p]; 
        (!m || w > m) ? (m = w) : null
    }
    return m;
}

Nuclide