jQuery實(shí)現(xiàn)的多列元素高度相等
在實(shí)際應(yīng)用中，可能為了實(shí)現(xiàn)整齊劃一，會(huì)將多列的高度設(shè)置為相等。
下面就通過代碼實(shí)例介紹一下如何利用jQuery實(shí)現(xiàn)此功能。
代碼實(shí)例:
<!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>上面的代碼實(shí)現(xiàn)了我們的要求，下面介紹一下它的實(shí)現(xiàn)過程。
一.代碼注釋:
（1）.$(document).ready(function(){})，當(dāng)文檔結(jié)構(gòu)完全加載完畢再去執(zhí)行函數(shù)中的代碼。
（2）.var maxHeight = -1，聲明一個(gè)變量并賦初值為-1，它是用來存儲(chǔ)最終的最大高度。
（3）.$('.antzone').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
})，遍歷每一個(gè)class屬性值為antzone的元素。
然后使用三元運(yùn)算符獲取最大的高度。
（4）.$('.antzone').each(function() {
$(this).height(maxHeight);
})，將所有的元素高度設(shè)置為這個(gè)最大高度。
（1）.each()方法可以參閱jQuery each()一章節(jié)。
（2）.三元運(yùn)算符可以參閱三元運(yùn)算符用法詳解一章節(jié)。
（3）.height()方法可以參閱jQuery height()一章節(jié)。
相關(guān)推薦
-
jquery實(shí)現(xiàn)的滑動(dòng)軸效果代碼實(shí)例
本章節(jié)分享一段代碼實(shí)例，它實(shí)現(xiàn)了使用鼠標(biāo)鼠標(biāo)拖動(dòng)元素滑動(dòng)效果。也就是滑動(dòng)軸效果，并且能夠選取數(shù)字，代碼實(shí)例如下:ut
-
js動(dòng)態(tài)創(chuàng)建文本框代碼實(shí)例
本章節(jié)介紹一下如何動(dòng)態(tài)的創(chuàng)建文本框，代碼非常的簡單。代碼如下: r
-
文本框失去焦點(diǎn)即刻進(jìn)行表單驗(yàn)證代碼實(shí)例
大家可能都見過這樣的表單驗(yàn)證效果，當(dāng)填寫完當(dāng)前文本框焦點(diǎn)離開后會(huì)立馬進(jìn)行表單驗(yàn)證。下面就通過代碼實(shí)例介紹一下如何實(shí)現(xiàn)此功能。代碼如下:
-
javascript定時(shí)器函數(shù)開始和結(jié)束代碼實(shí)例
本章節(jié)分享一段代碼實(shí)例，它演示了stTimout()定時(shí)器函數(shù)開始執(zhí)行和結(jié)束效果。代碼實(shí)例如下:
-
angularJS結(jié)合canvas實(shí)現(xiàn)的畫圖代碼實(shí)例
本章節(jié)介紹分享一段代碼實(shí)例，它實(shí)現(xiàn)ngulrJS結(jié)合cnvs實(shí)現(xiàn)作圖效果。代碼實(shí)例:
帝國CMS模板博客文章資訊自適應(yīng)手機(jī)HTML5網(wǎng)站SEO優(yōu)化版
2023-12-26 14:39:32
美文句子文章網(wǎng)站模板自適應(yīng)作文百科資訊源碼
2023-12-22 17:46:01
帝國CMS模板個(gè)人博客美文佳句文章資訊自適應(yīng)手機(jī)網(wǎng)站源碼
2023-12-19 18:01:32
帝國cms簡潔兩端資訊文章句子網(wǎng)美文源碼詩句模板
2023-12-13 10:58:14
帝國cms大氣簡潔資訊文章博客源碼電商資訊教程網(wǎng)站模板
2023-11-30 13:56:14
