jQueryで下記のコードを書きました。
関数 matchHeightは、高さを合わせる関数です。
上から5行目から8行目で3つのブロックに対してこの関数を適用しているのですが、もっとシンプルに一行とかで書く方法はないでしょうか?
HTML
1 <div id="hoge1"> 2 <ul class="topContMenu"> 3 <li><a href="">hogehoge</a></li> 4 <li><a href="">hogehogehogehoge<br>hogehoge</a></li> 5 <li><a href="">hogehoge</a></li> 6 <li><a href="">hogehoge</a></li> 7 <li><a href="">hogehoge</a></li> 8 <li><a href="">hogehoge</a></li> 9 <li><a href="">hogehoge</a></li> 10 </ul> 11 </div> 12 13 <div id="hoge2"> 14 <nav> 15 <ul> 16 <li><a href="">about</a></li> 17 <li><a href="">example</a></li> 18 <li><a href="">information<br>hogehoge<br>hogehoge</a></li> 19 <li><a href="">activity</a></li> 20 <li><a href="">center</a></li> 21 <li><a href="">document</a></li> 22 <li><a href="">lecture</a></li> 23 </ul> 24 </nav> 25 </div> 26 27<div id="hoge3"> 28 <div class="block"> 29 hoge3 30 </div> 31 <div class="block"> 32 hoge3<br> 33 hoge3<br>hoge3<br>hoge3<br>hoge3 34 </div> 35 </div>
jquery
1$(document).ready(function() { 2 3 var $topContentMenuHeight = $('#hoge1 .topContMenu li a'); 4 var $gnaviHeight = $('#hoge2 nav ul li a'); 5 var $blockHeight = $('#hoge3 .block'); 6 7 matchHeight($topContentMenuHeight); 8 matchHeight($gnaviHeight); 9 matchHeight($blockHeight); 10 11 12 function matchHeight($element) { 13 var heighestHeight = 0; 14 $element.each(function() { 15 var currentHeight = $(this).height(); 16 //console.log('currentHeight: ', currentHeight); 17 if (currentHeight > heighestHeight) { 18 heighestHeight = currentHeight; 19 } 20 21 }); 22 //console.log('heightestHeight: ', heighestHeight); 23 $element.height(heighestHeight); 24 } 25 26});
回答5件
あなたの回答
tips
プレビュー