元素数组中的jQuery min / max属性
有没有一种简单的方法来从jQuery中的元素数组中find最小/最大属性？
我总是发现自己dynamic地调整基于最小和最大对应的元素组。 大多数情况下，这与元素的宽度和/或高度有关，但我确定这可以应用于元素的任何属性。
我通常做这样的事情：
var maxWidth = 0; $('img').each(function(index){ if ($(this).width() > maxWidth) { maxWidth = $(this).width(); } }); 但似乎你应该能够做到这样的事情：
var maxWidth = $('img').max('width');
这个function是否存在于jQuery中，或者有人可以解释如何创build一个基本的插件来做到这一点？
谢谢！
使用快速的JavaScript最大值/最小值 – John Resig
有三个徽标的谷歌，雅虎和冰的例子。
HTML
<img src="http://www.google.co.in/intl/en_comhttp://img.dovov.comsrpr/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在这里
你可以在OO的上下文之外使用apply ，不需要扩展原型：
var maxHeight = Math.max.apply( null, $('img').map(function(){ return $(this).height(); }).get() );
我喜欢在jQuery文档中以.map()为例的优雅的解决scheme，如何平衡div高度 。 我基本上适应它与宽度工作，并进行了演示 。
$.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
看看计算插件 ，也许它可以帮助你解决你的问题。 他们提供了一些math函数，如最小值，最大值和平均值的DOM元素。
例子：
$("input[name^='min']").min(); $("input[name^='max']").max();
作为插件卷起来返回宽度和高度的最小最大值：
// 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.
我写了一个简单的插件来做到这一点 – 请参阅gregbrown.co.nz/code/jquery-aggregate 。 安装它，你可以这样做：
var maxWidth = $('img').aggregate('width', 'max');
您可以使用本机“sorting”function来更好地控制哪些元素进行比较
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); };
你可以这样称呼它
var maxWidth = $('img').deepMax(function(a, b){ //-1 if a < b; +1 otherwise return $(a).width() - $(b).width(); });
要么
你可以使用可以实现的下划线的 _.max …
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();});
插件/创作页面实际上有一个确定最高元素的例子。
这基本上是你在这里，只是滚到一个插件，方便访问。 也许你可以把它用于你的用途。
