jQuery实现的多列元素高度相等
在实际应用中，可能为了实现整齐划一，会将多列的高度设置为相等。
下面就通过代码实例介绍一下如何利用jQuery实现此功能。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/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()一章节。
下一篇：点击可以平滑定位到网页指定位置
相关推荐
-
jquery实现的滑动轴效果代码实例
本章节分享一段代码实例，它实现了使用鼠标鼠标拖动元素滑动效果。也就是滑动轴效果，并且能够选取数字，代码实例如下:ut
-
js动态创建文本框代码实例
本章节介绍一下如何动态的创建文本框，代码非常的简单。代码如下: r
-
文本框失去焦点即刻进行表单验证代码实例
大家可能都见过这样的表单验证效果，当填写完当前文本框焦点离开后会立马进行表单验证。下面就通过代码实例介绍一下如何实现此功能。代码如下:
-
javascript定时器函数开始和结束代码实例
本章节分享一段代码实例，它演示了stTimout()定时器函数开始执行和结束效果。代码实例如下:
-
angularJS结合canvas实现的画图代码实例
本章节介绍分享一段代码实例，它实现ngulrJS结合cnvs实现作图效果。代码实例:
