floatとかで横に揃えたりすることがあるけど、その時に高さがバラバラになるから、それを制御するjs。
jquery使用。
htmlとcssはこんな感じ
<ul class="test_ul"> <li>ああああああああ</li> <li>ああああああああああああああ</li> <li>あああ</li> <li>ああああああああああああああああああああああああああああ</li> </ul>
.test_ul li { float: left; width: 200px; }
現状だと、4つ目のliタグのみが改行される。そのため、4つ目だけ高さが違う。
これをcssで調整してもいいんだけど、更新するたびにcss調整するのめんどい!ってことでjsでやってしまおう。
var ul_array = []; var saidai; $(function() { $(window).on("load resize",function() { $(".test_ul li").each(function(i) { ul_array[i] = $(".test_ul li").eq(i).height(); }); saidai = Math.max.apply(null, ul_array); $(".test_ul li").height(saidai); }); });
まず空の配列を作る。
var ul_array = [];
ページ読み込みした時とリサイズした時に実行したいからloadとresize。
$(window).on("load resize",function() { ... });
liタグの数だけ実行(each)。iは0スタートでliタグの数になるまで1ずつ上がっていく。今回の場合はi=0、i=1、i=2、i=3。
$(".test_ul li").each(function(i) { ... });
配列に1つ1つ入れてく。eqは番目。
ul_array[i] = $(".test_ul li").eq(i).height();
なので、今回の場合はこれと同じ感じになる
ul_array[0] = $(".test_ul li").eq(0).height(); ul_array[1] = $(".test_ul li").eq(1).height(); ul_array[2] = $(".test_ul li").eq(2).height(); ul_array[3] = $(".test_ul li").eq(3).height();
Math.max.apply(null, ul_array);は配列の中から最大値を取る。最小値にしたい場合はmaxじゃなくてmin。
saidai = Math.max.apply(null, ul_array);
あとはリストタグに高さを加える。
$(".test_ul li").height(saidai);
というわけで完成ー。以上!