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()一章節。
相關文章
- java 兩個列表的元素是否相等且各自元素數量相等Java
- jQuery實現DOM元素事件動態繫結jQuery事件
- 父元素下有子元素,子元素也有高度但父元素的高度為何為0呢?分析下可能出現的原因及解決方法
- 多個下拉去重,jQuery實現jQuery
- Minimum Moves to Equal Array Elements 最小移動次數使陣列元素相等陣列
- 移除陣列 arr 中的所有值與 item 相等的元素。不要直接修改陣列 arr,結果返回新的陣列陣列
- jQuery遍歷array陣列元素程式碼例項jQuery陣列
- jQuery事件中on實現繫結多個事件jQuery事件
- JQuery插入元素jQuery
- jQuery 新增元素jQuery
- 使用 CSS 實現多列布局CSS
- jQuery 元素操作——遍歷元素jQuery
- leetcode:462. 最少移動次數使陣列元素相等 II(數學,中等)LeetCode陣列
- html 子元素div影響父元素高度HTML
- jQuery無法獲取隱藏元素(display:none)寬度(width)和高度(height)的新解決方案jQueryNone
- 判斷陣列裡面的json 物件是否相等,相等則移除陣列JSON物件
- JavaScript 陣列的指定位置插入多個元素JavaScript陣列
- jQuery textarea框高度自適應jQuery
- jQuery刪除元素jQuery
- jQuery 刪除元素jQuery
- jQuery之html()的實現jQueryHTML
- jQuery之text()的實現jQuery
- 資料結構實驗 多維陣列的實現資料結構陣列
- textarea實現高度自適應的理解
- 統計陣列元素中每個元素出現的次數陣列
- jquery裡判斷陣列內是否包含了指定的值或元素的方法jQuery陣列
- jQuery實現原理jQuery
- 陣列中每個陣列元素出現的次數陣列
- 教你三種jQuery框架實現元素顯示及隱藏動畫方式jQuery框架動畫
- 微信小程式swiper高度自適應,swiper的子元素高度不固定微信小程式
- 基於jquery實現的ExceljQueryExcel
- 實現一個jQuery的APIjQueryAPI
- jQuery中動畫的實現jQuery動畫
- jQuery之過濾元素jQuery
- jQuery之元素查詢jQuery
- Jquery之遍歷元素jQuery
- C# 一維陣列如何快速實現陣列元素的資料型別的轉換?C#陣列資料型別
- 比較兩個陣列是否相等陣列
- jquery裡遍歷普通陣列和多維陣列的方法及例項jQuery陣列