50

Is there a simple way to find the min/max property from an array of elements in jQuery?

I constantly find myself dynamically resizing groups of elements based on the minimum and maximum counterparts. Most of the time this pertains to the width and/or height of an element but I'm sure this could be applied to any property of an element.

I usually do something like this:

var maxWidth = 0;

$('img').each(function(index){
if ($(this).width() > maxWidth)
{
maxWidth = $(this).width();
}
});

But it seems like you should be able to do something like this:

var maxWidth = $('img').max('width');

Does this functionality exist in jQuery or can someone explain how to create a basic plugin that does this?

Thanks!

0

8 Answers 8

75

Use Fast JavaScript Max/Min - John Resig

Example with three logos of google, yahoo and bing.

HTML

<img src="http://www.google.co.in/intl/en_com/images/srpr/logo1w.png" alt="Google Logo" /><br/>
<img src="http://l.yimg.com/a/i/ww/met/yahoo_logo_in_061509.png" alt="Yahoo Logo" /><br/>
<img src="http://www.bing.com/fd/s/a/h1.png" alt="Bing Logo" />

Javascript

$(document).ready(function(){
    // Function to get the Max value in Array
    Array.max = function( array ){
        return Math.max.apply( Math, array );
    };

    // Function to get the Min value in Array
    Array.min = function( array ){
       return Math.min.apply( Math, array );
    };

    //updated as per Sime Vidas comment.
    var widths= $('img').map(function() {
        return $(this).width();
    }).get();

    alert("Max Width: " + Array.max(widths));
    alert("Min Width: " + Array.min(widths));
});

P.S: jsfiddle here

1
16

You can use apply outside the context of OO, no need to extend the prototype:

var maxHeight = Math.max.apply( null,
        $('img').map(function(){ return $(this).height(); }).get() );
3

I like the elegant solution posted as a .map() example in the jQuery docs on how to equalize div heights. I basically adapted it to work with widths and made a demo.

$.fn.limitWidth = function(max){
  var limit = (max) ? 'max' : 'min';
  return this.width( Math[limit].apply(this, $(this).map(function(i,e){
   return $(e).width();
  }).get() ) );
};

// Use the function above as follows
$('.max-width').limitWidth(true); // true flag means set to max
$('.min-width').limitWidth();     // no flag/false flag means set to min
1
  • Loving this answer, thank you! Thanks for: - Avoiding monkey-patching Array - Linking to an example in jQuery docs - Using a jQuery plugin 💯
    – samjewell
    Feb 22, 2018 at 11:47
1

Rolled up as a plugin to return min-max of width and height:

// Functions to get the Min & Max value in Array

if (!Array.min) { Array.min = function( array ){return Math.min.apply( Math, array )} }
if (!Array.max) { Array.max = function( array ){return Math.max.apply( Math, array )} }

(function( $ ){     // Standard jQuery closure to hide '$' from other libraries.

    // jQuery plug-in to get the min and max widths of a set of elements

    $.fn.dimensionsMinMax = function(whnx) {

    /*
    ################################################################################

    Name
    ====

        dimensionsMinMax(whnx) - jQuery plug-in to get min & max width & height

    Parameters
    ==========

        whnx - A 4-element array to receive the min and max values of the elements:
            whnx[0] = minimum width;
            whnx[1] = maximum width;
            whnx[2] = minimum height;
            whnx[3] = maximum height.

    Returns
    =======

        this - so it can be "chained".

    Example
    =======

        var minmax = new Array(4);
        var number_of_images = $('img').dimensionsMinMax(minmax).class('abc').length;
        console.log('number of images = ', number_of_images);
        console.log('width  range = ', minmax[0], ' to ', minmax[1]);
        console.log('height range = ', minmax[2], ' to ', minmax[3]);

    ################################################################################  
    */
        var  widths = new Array(this.length);
        var heights = new Array(this.length);

        this.each(function(i){
            $this      = $(this);
             widths[i] = $this.width();
            heights[i] = $this.height(); 
        });

        whnx[0] = Array.min( widths);
        whnx[1] = Array.max( widths);
        whnx[2] = Array.min(heights);
        whnx[3] = Array.max(heights);

        return this;
    }

})( jQuery );   // End of standard jQuery closure.
0

Take a look at the calculation plugin, maybe it can help you with your problems. They offer a number of math functions, like min, max and avg on DOM-elements.

Examples:

$("input[name^='min']").min();
$("input[name^='max']").max();
0

I wrote a simple plugin to do exactly this - see gregbrown.co.nz/code/jquery-aggregate . With it installed, you could do:

var maxWidth = $('img').aggregate('width', 'max');

0

You can use native "sort" function to have more control over which elements are compared

Array.prototype.deepMax = function(comparator){
  if(typeof comparator === 'function'){
    var sorted = this.slice(0).sort(comparator);
    return sorted[sort.length - 1];
  }
  return Math.max.apply(Math, this);
};

and you can call it like

var maxWidth = $('img').deepMax(function(a, b){
  //-1 if a < b; +1 otherwise
  return $(a).width() - $(b).width();
});

OR

you can use _.max of Underscore which is can be implemented like...

Array.prototype.max = function(iterator){
  if(!iterator && obj[0] === +obj[0])
    return Math.max.apply(Math, this);
  var result = -Infinity, lastComputed = -Infinity;
  this.forEach(function(value, index){
    var computed = iterator ? iterator(value, index, this) : value;
    computed > lastComputed && (result = value, lastComputed = computed);
  });
  return result;
};

var maxWidth = $('img').max(function(val){ return $(val).width();});
-1

The Plugins/Authoring page actually has an example for determining the tallest element.

It's basically what you have here, just rolled into a plugin for easy access. Maybe you could appropriate it for your uses.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.