jQuery中的等高列

嗨，我正在寻找基于jQuery的相等高度列。 我知道有很多漂浮在我身边，但我的要求有点不同 。 我想在Mega菜单中使用它们，其中大约有4-5个下拉列表，每个下拉列表有3-4列。

我希望所有这些3-4列具有相同的高度，但不是所有的下拉列表，因为列高度在另一个下拉列表中会有所不同，具体取决于该部分的内容。

我在MooTools中找到了一个完美符合我要求的解决方案。 下面的MooTools代码使特定div中的所有列都等于其父div的高度

MooTools代码：

var Equalizer = new Class({ initialize: function(elements) { this.elements = $$(elements); }, equalize: function(hw) { if(!hw) { hw = 'height'; } var max = 0, prop = (typeof document.body.style.maxHeight != 'undefined' ? 'min-' : '') + hw; //ie6 ftl offset = 'offset' + hw.capitalize(); this.elements.each(function(element,i) { var calc = element[offset]; if(calc > max) { max = calc; } },this); this.elements.each(function(element,i) { element.setStyle(prop,max - (element[offset] - element.getStyle(hw).toInt())); }); return max; } }); 

用法：

 var columnizer = new Equalizer('.sizeMe').equalize('height'); //call .equalize() as often as you want! 

有人可以帮我转换jQuery中的代码吗。 实际上我的整个模板都是基于jQuery的，只是为了这个等高函数，我不想加载另一个JavaScript库。

请帮忙！

Answer 1

是的，认为这可能是有用的，所以它为你的jQuery插件。

演示： http ： //jsfiddle.net/AXqBb/

equalizer.js：

 (function($) { String.prototype.capitalize = function() { return this.replace(/^(.)/, function (c) { return c.toUpperCase(); }) }; $.fn.equalize = function(hw) { if (!hw) { hw = 'height'; } var max = 0; var prop = (typeof document.body.style.maxHeight != 'undefined' ? 'min' + hw.capitalize() : hw); var offset = 'offset' + hw.capitalize(); this.each(function() { var calc = parseInt(this[offset]); if (calc > max) { max = calc; } }); this.each(function() { $(this).css(prop, max - (parseInt(this[offset]) - $(this)[hw]())); }); return max; }; })(jQuery); 

这样称呼：

 var maxHeight = $('.sizeMe').equalize('height'); 

我保持代码与您发布的代码类似，因此您可以看到更改，因此对任何不良风格道歉 – 希望它可归因于原始作者。 😉

NB。 我在这段代码中为String添加了一个基本的第一个单词大小写函数; 如果已定义需要删除。