Question

Let me start by saying that I’m not a JavaScript programer or a jQuery guru by any means, I’m actually just starting with jQuery.

I have the two following jQuery codes:

$('.tipTrigger').hover(function(){
    $(this).toggleClass('active').prev('.tipText').stop(true, true).fadeToggle('fast'); 
});

and

if ($(".tooltip-container").length > 0){        
    $('.tipTrigger').hover(function(){
        $(this).toggleClass('active').prev('.tipText').stop(true, true).fadeToggle('fast'); 
    });
}

Several questions I have about this:

1. What is basically the difference between the two codes above?
2. What is the meaning of if ($(".tooltip-container").length > 0){?
3. Is there a benefit to using the above if?
4. What’s more ‘efficient’ from a developer’s stand point? (that is IF something so small would have a considerable performance impact in any way)

Any other comments/help with this simple comparison would be greatly appreciated.

Thanks in advance.

Answer 1

• What is basically the difference between the two codes above?

  The second will only set the hover function if there is an element on the page with the class ‘tooltip-container’

• What is the meaning of if ‘($(“.tooltip-container”).length > 0){‘?

  Simple if statement to test if element having class tooltip-container exist on document

• Is there a benefit to using the above if?

  In short, in this case, not really, since the .hover wont be asigned unless an element having classtipTrigger exist anyway. Also this could cause performance issues since it only checks to see if one tooltip-container element exist. If this is a check to ensure tipTrigger is “inside” said container, it will fail in that as soon as one element with tooltip-container is found, ALL elements with tipTrigger will be asigned hover function and this MAY BE undesired.

• What’s more ‘efficient’ from a developer’s stand point? (that is IF something so small would have a considerable performance impact in any way)

  If you must check to make sure that only tipTrigger elements inside tooltip-container elements are fired, you might consider use of jQuery’s .each function or use CSS in the selector, as follows

>

$('.tooltip-container .tipTrigger').hover(function(){
    $(this).toggleClass('active').prev('.tipText').stop(true, true).fadeToggle('fast'); 
});

For Further Understanding

• .toggleClass: toggle’s class active on this element
• .prev: moves chain into referencing the element having class tipText that comes before current element in dom
• .stop: stops any anymation in current on this element
• .fadeToggle: will begin to fade the element into “hiding”