JQuery min / max property from an array of elements

Question

Is there an easy 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 minimum and maximum copies. In most cases, this refers to the width and / or height of the element, but I am sure that this can be applied to any property of the element.

Usually I do something like this:

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

But it looks like you should do something like this:

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

This function exists in jQuery or can someone explain how to create a basic plugin that does this?

Thank!

Answer 1

Use Fast JavaScript Max / Min - John Resig

An example with three google, yahoo and bing logos.

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

PS: jsfiddle here

Answer 2

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

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

Answer 3

I like the elegant solution posted as .map() example in jQuery docs on how to align div height . I basically adapted it to work with width 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 

Answer 4

Take a look at the plugin, perhaps it will help you in solving your problems. They offer a number of mathematical functions, such as min, max, and avg on DOM elements.

Examples:

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

Answer 5

Shifted as a plugin to return min-max 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. 

Answer 6

I wrote a simple plugin to do just that - see gregbrown.co.nz/code/jquery-aggregate . With it, you can do:

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

Answer 7

You can use your own sort function to have more control over which items 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 Underscore , which can be implemented as ...

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

Answer 8

On the Plugins / Author page there is an example to determine the highest element.

This is basically what you have here, just screwed into the plugin for easy access. Perhaps you could use it for your own purposes.