Proprietà jQuery min / max dalla matrice di elementi

C’è un modo semplice per trovare la proprietà min / max da una serie di elementi in jQuery?

Mi trovo costantemente a ridimensionare dynamicmente gruppi di elementi in base alle controparti minima e massima. Il più delle volte questo riguarda la larghezza e / o l’altezza di un elemento, ma sono sicuro che questo potrebbe essere applicato a qualsiasi proprietà di un elemento.

Di solito faccio qualcosa del genere:

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

Ma sembra che dovresti essere in grado di fare qualcosa del genere:

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

Esiste questa funzionalità in jQuery o qualcuno può spiegare come creare un plugin di base che faccia questo?

Grazie!

Utilizza JavaScript veloce Max / Min – John Resig

Esempio con tre loghi di google, yahoo e bing.

HTML

 Google Logo
Yahoo Logo
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 qui

Puoi usare apply al di fuori del contesto di OO, non è necessario estendere il prototipo:

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

Mi piace l’elegante soluzione pubblicata come esempio .map() nei documenti jQuery su come equalizzare le altezze div . In pratica l’ho adattato per lavorare con larghezze e fatto una 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 

Dai un’occhiata al plugin di calcolo , forse può aiutarti con i tuoi problemi. Offrono un numero di funzioni matematiche, come min, max e avg su elementi DOM.

Esempi:

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

Arrotolato come plugin per restituire min-max di larghezza e altezza:

 // 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. 

Ho scritto un semplice plugin per fare esattamente questo – vedi gregbrown.co.nz/code/jquery-aggregate . Con l’installazione, puoi fare:

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

È ansible utilizzare la funzione “sort” nativa per avere un maggiore controllo su quali elementi vengono confrontati

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

e puoi chiamarlo così

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

O

puoi usare _.max di Underscore che può essere implementato come ...

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

La pagina Plugin / Creazione ha in realtà un esempio per determinare l’elemento più alto.

È fondamentalmente quello che hai qui, appena inserito in un plugin per un facile accesso. Forse potresti adattarlo per i tuoi usi.