jQuery min/max de la propriété de la matrice d'éléments

Question

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

Je ne cesse de me retrouver dynamiquement le redimensionnement des groupes d'éléments basés sur le minimum et le maximum de leurs homologues. La plupart du temps cela se rapporte à la largeur et/ou hauteur d'un élément, mais je suis sûr que cela pourrait être appliquée à n'importe quelle propriété d'un élément.

J'ai l'habitude de faire quelque chose comme ceci:

var maxWidth = 0;

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

Mais il semble que vous devriez être en mesure de faire quelque chose comme ceci:

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

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

Merci!

Answer 1

L'Utilisation Rapide De 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

Answer 2

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

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

Answer 3

J'aime la solution élégante posté un .map() exemple dans le jQuery docs sur la façon d' égaliser div hauteurs. En gros, j'ai adapté pour qu'il fonctionne avec des largeurs et fait une 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

Answer 4

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

Exemples:

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

Answer 5

Enroulé comme un plugin pour revenir min-max de largeur et de 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.