CODEWITHSUNDEEP
jquery
Ricardo Zea
Ricardo Zea

Reputation: 10282

jQuery code difference

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.

Upvotes: 0

Views: 102

Answers (3)

SpYk3HH
SpYk3HH

Reputation: 22580

  • 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"

Upvotes: 1

David M
David M

Reputation: 72930

  1. The hover functionality will only be registered if...
  2. ... there is at least one element in the page with class "tooltip-container".
  3. Slight performance maybe, unless there is some hidden magic in the way these tooltips work I don't know about.
  4. If it's not going to slow it down or error, I generally favour cleaner code over miniscule performance tweaks.

Upvotes: 4

Dave Newton
Dave Newton

Reputation: 160321

The second sets the hover function only if there are one or more DOM elements with the class "tooltip-container".

Both traverse the DOM to find elements with the specified class(es); whether or not the difference in efficiency is worth it depends on the DOM, when the statement is called, etc.

Upvotes: 4

Related Questions