ulに何件かあればタイトル表示、0件ならば非表示

お知らせ
・○○○○
・○○○○

0件の場合「お知らせ」も非表示

script

$(function(){
 $("div.newsblock").each(function () {
 var num = $(this).find('ul.newslist li').length;
 if(num==0){
 $(this).find('ul.newslist').css('display','none');
 }
 });
});

css

.newsblock ul:before{
margin:0;
padding:2px 6px;
content:"お知らせ";
font-weight:bold;
border-bottom:1px solid #55aac9;
}

html

<div class="newsblock" style="margin:40px 0 0;padding:0 0 20px 0;">
<ul class="newslist">
<?php query_posts('category_name=xxx&posts_per_page=10'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<?php the_time('Y年m月d日'); ?>:<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile;endif;?>
</ul>
</div>

勉強させてもらったサイト

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です