web-dev-qa-db-fra.com

Propriété jQuery min / max à partir d'un tableau d'éléments

Existe-t-il un moyen simple de trouver la propriété min/max à partir d'un tableau d'éléments dans jQuery?

Je me retrouve constamment à redimensionner dynamiquement des groupes d'éléments en fonction des équivalents minimum et maximum. La plupart du temps, cela concerne la largeur et/ou la hauteur d'un élément, mais je suis sûr que cela pourrait être appliqué à n'importe quelle propriété d'un élément.

Je fais habituellement quelque chose comme ça:

var maxWidth = 0;

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

Mais il semble que vous devriez pouvoir faire quelque chose comme ça:

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

Cette fonctionnalité existe-t-elle dans jQuery ou quelqu'un peut-il expliquer comment créer un plugin de base qui fait cela?

Merci!

javascriptjqueryarrays
50
user624598

Utiliser Fast JavaScript Max/Min - John Resig

Exemple avec trois logos de google, yahoo et 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 ici

75
naveen

Vous pouvez utiliser apply en dehors du contexte d'OO, pas besoin d'étendre le prototype:

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

J'aime la solution élégante publiée sous forme d'exemple .map() dans les documents jQuery sur la façon de égaliser les hauteurs de div . Je l'ai essentiellement adapté pour travailler avec des largeurs et fait ne démo .

$.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
3
Mottie

Jetez un œil au plugin de calcul , il peut peut-être vous aider avec vos problèmes. Ils offrent un certain nombre de fonctions mathématiques, comme min, max et avg sur les éléments DOM.

Exemples:

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

Enroulé comme un plugin pour renvoyer min-max de largeur et hauteur:

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

Vous pouvez utiliser la fonction native de "tri" pour avoir plus de contrôle sur les éléments à comparer

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

et vous pouvez l'appeler comme

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

OR

vous pouvez utiliser _. max of nderscore qui peut être implémenté comme ...

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

J'ai écrit un plugin simple pour faire exactement cela - voir gregbrown.co.nz/code/jquery-aggregate . Une fois installé, vous pouvez faire:

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

0
Greg