横に並んでいたり、縦に並んでいる要素の幅や高さを揃える

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;
}

現状だと、４つ目のliタグのみが改行される。そのため、４つ目だけ高さが違う。
これを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) {
...
});

配列に１つ１つ入れてく。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);

というわけで完成ー。以上！