jQuery实现的多列元素高度相等
分类:实例代码
在实际应用中,可能为了实现整齐划一,会将多列的高度设置为相等。
下面就通过代码实例介绍一下如何利用jQuery实现此功能。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .antzone{ width:100px; height:300px; background:blue; float:left; margin:10px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { var maxHeight = -1; $('.antzone').each(function() { maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height(); }); $('.antzone').each(function() { $(this).height(maxHeight); }); }); </script> </head> <body> <div class="antzone"></div> <div class="antzone" style="height:200px;"></div> <div class="antzone" style="height:100px;"></div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
(2).var maxHeight = -1,声明一个变量并赋初值为-1,它是用来存储最终的最大高度。
(3).$('.antzone').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
}),遍历每一个class属性值为antzone的元素。
然后使用三元运算符获取最大的高度。
(4).$('.antzone').each(function() {
$(this).height(maxHeight);
}),将所有的元素高度设置为这个最大高度。
二.相关阅读:
(1).each()方法可以参阅jQuery each()一章节。
(2).三元运算符可以参阅三元运算符用法详解一章节。
(3).height()方法可以参阅jQuery height()一章节。