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

Answer 1

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

Answer 2

Change the .each() loop to this:

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

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

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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