CODEWITHSUNDEEP
javascriptjquerycss
popshuvit
popshuvit

Reputation: 110

Hide a div if the header tag within it is empty?

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?

Upvotes: 1

Views: 616

Answers (3)

Adil Shaikh
Adil Shaikh

Reputation: 44740

this works,

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

FIDDLE

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382160

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');
});

Upvotes: 5

asim-ishaq
asim-ishaq

Reputation: 2220

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

Upvotes: 1

Related Questions