jQuery 要素の数を判定して数に応じて表示、非表示を切り替える

jquery-002
動的なコンテンツで、本来ならば、PHPなどのサーバーサイドで、出力するコンテンツ数を制御させるべきなのですが、開発環境や、コスト、など関係で、デザイナー側(コーダー)でコンテンツの表示・非表示の切り替えなどを行わないといけないケースって結構ありますよね?
そんな時に便利なのが、jQueryで要素の数を判定して数によって動作をきりかえる方法です。指定したclass,idの要素数を”length”で引き出します。そしてその数が0件だったら親要素ごと非表示にします。(下記ソース)
※下記は、同じclassの複数の要素内のカウントも有効にできるように、eachを使い、かつ非表示にする要素も(this)から導き出し、親子要素の関係を保ちながら処理することで、同じclass名の繰り返しでも個別の処理が可能になります。

$(function(){
 //"div.categoryの要素毎に処理する
 $("div.category").each(function () {
 //"div.categoryの要素内のliの数をカウント
 var num = $(this).find('ul.catlist li').length;
 //"div.category内のul.catlist liが0件だったら
 if(num==0){
 $(this).find('ul.catlist').css('display','none');
 }
 });

});
<div class="category">
<ul class="catlist">
 <li>あああああああ</li>
 <li>いいいいいい</li>
</ul>
</div>

<div class="category">
<ul class="catlist"></ul>
</div>

<div class="category">
<ul class="catlist">
 <li>ううううう</li>
 <li>ええええええ</li>
 <li>おおおおおおお</li>
</ul>
</div>

コメントを残す

メールアドレスが公開されることはありません。