CODEWITHSUNDEEP
javascriptjquery
Liam
Liam

Reputation: 9855

if parent doesnt have X class, jQuery

I have the following markup:

<li id="fragment-3" class="slides virtualsation ui-tabs-panel" style="">
  <h1>Virtualisation</h1> 
  <p>By implementing virtualisation into Halton Borough Council Cetus Solutions managed to save them over £250,000 in annual expenditure.</p>
  <div class="animation">
    <div class="big-server" style="display: block;"><img src="_includes/images/sliders/big-server.png"></div>
    <div class="arrow" style="display: block;"><img src="_includes/images/sliders/arrow.png"></div>
    <div class="small-server-one" style="display: block;"><img src="_includes/images/sliders/small-server.png"></div>
    <div class="small-server-two" style="display: block;"><img src="_includes/images/sliders/small-server.png"></div>
    <div class="small-desktop" style="display: block;"><img src="_includes/images/sliders/small-desktop.png"></div>
  </div>
</li>

The child elements within the animation div all fade in:

$('.big-server').fadeIn(100);
$('.arrow').fadeIn(450);
$('.small-server-one').fadeIn(700);
$('.small-server-two').fadeIn(800);
$('.small-desktop').fadeIn(2000);

The parent LI (with id 'fragment-3' is part of a slideshow and when it is active the class 'ui-tabs-hide' is removed from it.

I need to write a function so that when the parent LI of the fading in divs isnt ui-tabs-hide then the function runs and the elements fade in, Does this make sense? Any help would be greatly appreciated!

Upvotes: 0

Views: 484

Answers (3)

Keith Rousseau
Keith Rousseau

Reputation: 4475

if(!$('#fragment-3').hasClass('ui-tabs-hide'))
{
   // Do Your Work
}

Upvotes: 0

gilly3
gilly3

Reputation: 91467

Use .closest() and .hasClass():

if (!$fadingInDiv.closest("li").hasClass("ui-tabs-hide")) {
    ...
}

Or, you can use .is():

if (!$fadingInDiv.is(".ui-tabs-hide *")) {
    ...
}

You've got options.

Upvotes: 0

karim79
karim79

Reputation: 342635

You can use .closest(). Example:

if(!$("div.animation").closest(".ui-tabs-hide").length) {
    // parent is not .ul-tabs-hide    
}

Upvotes: 2

Related Questions