2種類のリスト項目をjQueryを使って揃えたい

質問

スマートフォンサイト制作中です。

やりたい事は
横並びにしている2種類のリスト項目数を
jQueryを使って、揃えたいって事です。

以下のようなリストがあって、
2種類のulを横並びにしています。
（2列のテーブルみたいな感じ）

<ul class="column1">
<li>あいう</li>
<li>かきく</li>
<li>さしす</li>
</ul>

<ul class="column2">
<li>アイウ</li>
<li>カキク</li>
<li>サシス</li>
<li>タチツ</li>
</ul>

例として、上記の場合、class="column2"の方が<li>が一つ多いので
それに合わせてclass="column１"に<li>を追加して(追加した要素の中身はブランクで)、
横並びを揃えたいのです。
※要素の中身が2行になったりしてズレることはないです。

考え方として、おそらく
class="column1"とclass="column2"のそれぞれのエレメント数を
size()で取得して
そのエレメント数を比較して、大きい個数に合わせて、
足りない分を、足りない<ul>要素内にappend()を使って挿入でもするのかな？？
…って思っているのですが
どのように書けばよいのか、やっぱり分からないのです。

※ちなみにHTMLの、この<ul><li>リストは動的に生成しています。
現行のPCサイトのHTMLをいじらずに
スマホ対応しているので、このリストを使った横並びを変えることは出来ないのです。

どなたか詳しい方、どうかご教授ください。
どうぞ宜しくお願いいたします。

回答No.1

LancerVII · ベストアンサー

こんにちは。

すごく簡単に実装するならこんな感じになると思います。
ブランクのliが良いか悪いかはわかりませんが、高さを揃えるとかのほうがスマートな気がします。

==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7362658/

==== JavaScript
$().ready ( function() {
// 左側のリスト
var $ul1 = $('div.ul1 ul li' );
// 右側のリスト
var $ul2 = $('div.ul2 ul li' );
// 二つの差を求める
var s = $ul1.length - $ul2.length;
// 差がマイナスの場合は左側が足りないと判断し追加対象となるターゲットを設定
var $target = s < 0 ? $ul1 : $ul2;
// 差の絶対値を求めその回数をループ
for ( var i = 0; i < Math.abs(s); i ++ ) {
$target.parent().append('<li />');
}
});

==== HTML
<div class="ul ul1">
<ul>
<li>１</li>
<li>２</li>
<li>３</li>
<li>４</li>
</ul>
</div>
<div class="ul ul2">
<ul>
<li>Ａ</li>
<li>Ｂ</li>
<li>Ｃ</li>
<li>Ｄ</li>
<li>Ｅ</li>
</ul>
</div>

補足

LancerVIIさん

ありがとうございます。
スクリプトに加え、
一つ一つの詳細なコメントと、
それに動作サンプルまで…
本当にありがたいです。感謝です。

おかげさまで、期待通りに動きました！！

ただ、分からないところが一点。
ターゲットを設定するところの
var $target = s < 0 ? $ul1 : $ul2;
なのですが、
s < 0 ? $ul1 : $ul2;

ってどういう意味か、簡単でよいので教えていただけますか？
？とかって、よく分かってないので
簡単で全然、大丈夫ですので、教えていただけると助かります。

ちょっと本とかを調べたのですが、
やっぱり分からなかったので。

よろしかったらお願いいたします。
重ね重ね、申し訳ありません。

回答No.2

LancerVII

こんにちは。

>ただ、分からないところが一点。
>ターゲットを設定するところの
>var $target = s < 0 ? $ul1 : $ul2;
>なのですが、
>s < 0 ? $ul1 : $ul2;

キーワードとしては三項演算子と呼ばれるものです。

$target = s < 0 ? $url1 : $url2
の場合は
s<0がtrueの場合は$url1,s<0がfalseの場合は$url2を$targetに代入するという処理です。

if ( s < 0 ) {
$target = $url1;
} else {
$target = $url2;
}
と、動きは等価です。

（条件) ? 真の場合 : 偽の場合;

となります。

お礼

LancerVIIさん

ありがとうございます。

なるほど～
if文がそうやって書けるなんて。
大変、勉強させていただきました。

LancerVIIさんの解説はとても分かりやすかったです。
本当に感謝です。

これからも、またこちらでお世話になる質問をするかもしれませんが
その際は、どうぞ宜しくお願いいたします。
がんばって、jQueryをもっと、もっと勉強します。

ありがとうございました！