jQuery實現的多列元素高度相等
在實際應用中,可能為了實現整齊劃一,會將多列的高度設定為相等。
下面就通過程式碼例項介紹一下如何利用jQuery實現此功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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()一章節。
相關文章
- jQuery實現對陣列元素的轉換效果jQuery陣列
- drag & resize元素的jQuery實現jQuery
- jquery 實現iframe 自適應高度jQuery
- jquery實現的iframe高度自適應效果jQuery
- jQuery如何獲取元素的寬度和高度jQuery
- jquery獲取元素高度程式碼例項jQuery
- java 兩個列表的元素是否相等且各自元素數量相等Java
- jQuery實現的元素抖動外掛jQuery
- Jquery實現滑鼠拖動改變div高度jQuery
- jQuery動態設定div元素的高度和寬度jQuery
- jQuery實現的多個陣列合並程式碼例項jQuery陣列
- jquery實現的iframe高度自適應程式碼例項jQuery
- jQuery實現的具有淡出效果的元素刪除jQuery
- jquery實現的獲取指定元素指定型別元素數目jQuery型別
- jQuery中多個元素的Hover事件jQuery事件
- jQuery實現的元素淡入淡出動畫效果jQuery動畫
- jQuery實現的陣列合並效果jQuery陣列
- jQuery元素在陣列中的索引位置jQuery陣列索引
- 利用jquery實現的向指定元素追加指定內容jQuery
- jQuery實現的點選元素隱藏和顯示jQuery
- jquery實現的元素居中外掛簡單介紹jQuery
- Stickup – 輕鬆實現元素固定效果的 jQuery 外掛jQuery
- jQuery實現DOM元素事件動態繫結jQuery事件
- jQuery實現的將指定元素中的內容替換jQuery
- jquery實現的獲取當前元素的上一個元素程式碼例項jQuery
- 多個下拉去重,jQuery實現jQuery
- 使用jquery實現的清空表單元素程式碼例項jQuery
- jquery實現的如何在div的外部後面新增元素jQuery
- jQuery實現的刪除指定子元素程式碼例項jQuery
- 移除陣列 arr 中的所有值與 item 相等的元素。不要直接修改陣列 arr,結果返回新的陣列陣列
- jQuery如何實現獲取父元素下指定型別標籤的子元素集合jQuery型別
- Minimum Moves to Equal Array Elements 最小移動次數使陣列元素相等陣列
- jQuery實現的為元素新增或者刪除class樣式類jQuery
- jquery實現的元素以動畫方式移動和漸變效果jQuery動畫
- jQuery實現的元素延遲指定時間之後隱藏jQuery
- jquery實現的倒數獲取li元素簡單介紹jQuery
- jQuery根據多個屬性匹配元素jQuery
- jQuery實現的對元素的增刪改查程式碼例項jQuery