如果标题标签为空，则隐藏div吗？

Question

I have a carousel where I am trying to hide the description for certain slides if no content is being output dynamically.

My structure with content being output:

<div class="caption">
   <h3><a>title</a></h3>
   <p><a>description</a></p>
</div>

My structure without:

<div class="caption">
   <h3><a></a></h3>
   <p><a></a></p>
</div>

Javascript:

if($.trim($('.caption h3 a').text()) != "") {
$(".carousel-caption.h").addClass("visible");
}

I got the javascript from looking through similar questions on here. I have tried various ways of doing this but to no avail. I am not quite sure what I am missing?

Answer 1

You can do this to hide all .caption having an empty header :

$('.caption').show().filter(function(){
   return $.trim($('h3', this).text())===''
}).hide();

This might be nearer from your initial solution, changing only the class when the head has a content :

$('.caption').each(function(){
    if ($.trim($('h3', this).text())!=='') $(this).addClass('visible');
});

Answer 2

I am not a jQuery guy. But in YUI it can be simply like:

if (Y.one(".caption h3 a").get("innerHTML") == "") {
    alert("its empty");
}

try using .html instead of .text in jquery

Answer 3

this works,

 if($('.caption h3 a').text().trim() != "") {
       $(".carousel-caption.h").addClass("visible");
 }

FIDDLE