動的なコンテンツで、本来ならば、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>