jQueryでリストを3項目ずつにしたい。

質問

いつもこちらでお世話になっています。

またjQuery関連で質問をさせて下さい。

下のようなリスト項目をfloatさせています。

<ul class="box">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
</ul>

レイアウトをcssで設定して
1行あたり3項目ずつの横並びにしたいと考えています。
４項目以上の場合は、
2行目に、あらたに3項目分のリストを表示したいです。

※liの個数は動的に変化します。
※cssの方は特に問題なく出来ています。

例えば上記の例のように4項目あった場合に
2行目が1項目分しかないため、2項目分の余白ができるので
その足りない分のliの個数を算出し、liを追加したいと考えています。

$('ul.box').append('<li />');　を使うのだと思うのですが
どのようにappendするliの個数を、算出したらよいのでしょうか？

詳しい方、初心者の私にどうかご教授下さい。

いつもながらに恐縮ですが、何卒、宜しくお願いいたします。

回答No.1

kuzumiHK · ベストアンサー

こんな感じでいかがでしょうか。

if($('ul.box > li').size() % 3 != 0){ // li要素が3で割り切れなかったときだけ、
$.each(new Array(3 - $('ul.box > li').size() % 3),function(i){ // 3から余りを引いた分をループして、
$('ul.box').append('<li />'); // 空のli要素を追加する
});
}

お礼

kuzumiHKさん
ありがとうございます！
教えていただいた通り、実装したら期待通りにできました！

剰余の使い方とか、
配列を組み込むeachメソッドとか、スゴイ参考になりました。

これからも勉強頑張ります。

本当にありがとうございました。