Question

我有这个小脚本，使得盒子等于我在jQuery中一直使用的高度，我需要转换为一个站点的mootools。在这个例子中，方框将在样式表的第三个左侧浮动。

<div id="box1" class="equals">content here</div>
<div id="box2" class="equals">content here</div>
<div id="box3" class="equals">content here</div>



       jQuery(document).ready(function(){

var highestCol = Math.max(jQuery('#box1').height(),jQuery('#box2').height(),jQuery('#box3').height());
 jQuery('.equals').height(highestCol);
                        });

Answer 1

可能更好地使其模块化和可重复使用：

var equalElements = function(els) {
    // make elements equal height to max height of the set.
    els.setStyle("height", Math.max.apply(Math, els.map(function(el) { return el.getSize().y })));
};

equalElements(document.getElements("div.equals"));

http://jsfiddle.net/dimitar/TxtBQ/

Answer 2

window.addEvent('domready', function(){
  var highestCol = Math.max($('box1').getSize().y, $('box2').getSize().y, $('box3').getSize().y);
  $$('.equals').setStyle('height', highestCol);
}

Answer 3

有一个插件可以均衡高度/宽度，设置是否应调整为最大/最小元素：http://jsfiddle.net/oskar/5uQEP/

非常简单的用法：

document.getElements('li').equalize({
    dir: 'height',
    mode: 'max'
});

您还可以返回原始值并执行一些动画：

var maxHeight = document.getElements('li').equalize({
    dir: 'height',
    mode: 'max',
    raw: true
});

document.getElements('li').tween('height', maxHeight);

在适合高度的小脚本上将jquery转换为mootools

3 个答案: