CODEWITHSUNDEEP
jqueryif-statementjquery-selectorsselector
TripsLeft
TripsLeft

Reputation: 549

How to Write jQuery Only if a Child Div has a Class

I have a menu that will be generated in php that will have the possibility of having two different child divs within it. Long story short, the php will add a div with a class name of "showBubbles" within the "li", and/or another div with the class of "hideLogo." I need to execute one function if "showBubbles" div is present, and another function if "hideLogo" is present. How can I do this on mouse hover? The structure looks like this:

<ul>
<li>
    <a href="#"><img src="imagePlaceholder" /></a>
    <div class="showBubbles"></div>
    <div class="hideLogo"></div>
</li>
</ul>

Upvotes: 2

Views: 7259

Answers (6)

zeacuss
zeacuss

Reputation: 2623

inside the hover callback function, you can use the following code:

var showBubbles = $("li div.showBubbles").length;
if(showBubbles > 0){
   // first function here
}

var hideLogo = $("li div.hideLogo").length;
if(hideLogo > 0){
   // second function here
}

Upvotes: 1

Codegiant
Codegiant

Reputation: 2150

try this

JS CODE

$('li').hover(function(){
    if($(this).find('.showBubbles')){
       showBubbles();
    }
    if($(this).find('.hideLogo')){
       hideLogo();
    }
});

function showBubbles(){
  alert('showBubbles response');
}

function hideLogo(){
  alert('hideLogo response');
}

JS FIDDLE CODE

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79850

Try like below,

var sb = 0, hb = 0;
$('li').hover(function () {
   sb = $('.showBubbles', this).length;
   hb = $('.hideLogo', this).length;

   if (sb) {  /*function for sb*/ }
   if (hb) { /*function for hb*/ }

}, function () {

   if (sb) {
     //function for sb 
     sb = 0;
   }
   if (hb) { 
     //function for hb 
     hb = 0;
   }
});

Upvotes: 0

Robin Maben
Robin Maben

Reputation: 23114

$('ul').on('mouseover', 'li', function() {

   $(this).find('div.showBubbles').length && showBubbles(); //calls showBubbles()

   $(this).find('div.hideLogo').length && hideLogo(); //calls hideLogo()

});

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71939

You can check if a div with a certain class by trying to select it with jQuery, then checking the length of the returned jQuery object. For example, for showBubbles:

var showBubblesExists = $('li .showBubbles').length > 0;

I believe this should point you to the correct solution.

Upvotes: 0

David Barker
David Barker

Reputation: 14620

Not tested but this should do the trick.

$('ul').on('mouseover', 'li', function(e)
{
    if($(this).children('div').hasClass('showBubbles'))
    {
        // Execute code for showBubbles div
    }
    else
    {
        // Execute code if 'showBubbles' is not present
    }
}

Upvotes: 6

Related Questions