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

jquery

よく、PHPなどのサーバーサイドプログラムで、データがあれば、出力して、なければ出さない、といったプログラムはよく見かけます。

そんなのプログラマーとしては朝飯前ですが、よくコーディングスタッフから、「もしデータが”0件”だったら、表示枠(見出しとか)ごと消したいんだけど」と、注文をつけられることも多いと思います。

そんなのすぐ出来るけど、あとから言われてもめんどくさいし、またスクリプト書き直さないと・・なんて嫌な顔をされることもあります。

そんな時は、jQueryで消してしまいしょう!(プログラマさんの手を煩わせないで済みますし・・)
jQuery本体は読み込み済みとして、任意の箇所に以下のソースを書きましょう。

<script type="text/javascript">
$(function(){
        if($('#contents div.data ul li').size()=='0'){
               $('div.data').css('display','none');
        }
});

上記の例は、「#contents div.data ul li」の「li」の数が”0”(ゼロ)だった場合は、「div.data」を非表示にしましょう。
という記述です。

<div id="contents">
<div class="data">
<ul>
<!-- ここにプログラムから読み込む -->
</ul>
</div>
</div>

コメントを残す

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