0

Which one is the better way for performance to set a hover event on a div with class 'con'? Is there any difference?

  1. $('.con').hover(func(){});
  2. $('.content0.content.%etc%.con').hover(func(){});
  3. var con = $('.con'); con.hover(func(){});

    <script>
        $('.con').hover(func(){});
    </script>
    
    <div class="content0">
        <div class="content">
            <div class="fl grad">
                <div class="fl bor_rad bor_gray adver1">
                    <div class="clear">
                        <div class="fl left_ot">
                            <div class="bor_orang h150">
                                <div class="w130 bgfff txc pab10 con">
                                    <a href="#" class="ankor_cont bor_bot_bl w80 ot_top">More</a>
                                </div>
                                <div class="w130 bgfff txc pab10 con">
                                    <a href="#" class="ankor_cont bor_bot_bl w80 ot_top">More</a>
                                </div>
                                <div class="w130 bgfff txc pab10 con">
                                    <a href="#" class="ankor_cont bor_bot_bl w80 ot_top">More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

2 Answers 2

1

There's no significant difference between the three ways you listed, provided the two different selectors you've given select the same elements.

Note that the element lookup is done once, when you do the $("selector here") part. It's not repeated when the hover occurs.


Side note: Probably 95% of what I've seen people do in hover event handlers can, on modern browsers (e.g., not IE7 and earlier), be better achieved with CSS using the :hover pseudoclass. The other 5% can't, and you haven't said what you're doing and it may well be in that 5%, but I thought I'd point it out... :-)

2
  • Thank you, but what is the better way for tasks where the selector above occurs many times?
    – Anton
    Oct 18, 2013 at 10:22
  • @user1312750: If you had the code in a loop, or if you had code doing $("selector here") in a mousemove handler, etc. Oct 18, 2013 at 10:41
-1
 1. $('.con').hover(func(){});
 2.   $('.content0.content.%etc%.con').hover(func(){}); var con =
 3.   $('.con'); con.hover(func(){});

all three work but they take time

because every time jQuery search in all document(DOM) then come to your selector

so use context by this we tell in jQuery that search not in all document but search form this element like below.. in your html

<div class="content0">
    <div class="content">
        <div class="fl grad">
            <div class="fl bor_rad bor_gray adver1">
                <div class="clear">
                    <div class="fl left_ot">
                        <div class="bor_orang h150">
                            <div class="w130 bgfff txc pab10 con">
                                <a href="#" class="ankor_cont bor_bot_bl w80 ot_top">More</a>
                            </div>
                            <div class="w130 bgfff txc pab10 con">
                                <a href="#" class="ankor_cont bor_bot_bl w80 ot_top">More</a>
                            </div>
                            <div class="w130 bgfff txc pab10 con">
                                <a href="#" class="ankor_cont bor_bot_bl w80 ot_top">More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

now if you write

$('.con').hover(func(){}); 

then it reach your selector by following way

first go to

document
     |
   body
     |
   content0(class)
     |
   content (class)
     |....
    ...
    then at last your selector '.con'

so it will take time to get better result define context by this it know from where it search your selector like

 $('.con','.content0').hover(func(){}); 

now it reach your selector by following way

first go to

   content0(class)
    ....
    ...
    then at last your selector '.con'

Context really helps when you have a much larger DOM that you are searching through. Searching for IDs is already very fast and context doesn't really help that much in that case. Where context can really make a difference is when you are selecting by tag name or class.

Try testing like this: http://jsbin.com/aciji4/4

you can really see the timing get better for context when you bump up number of items in the DOM like this: http://jsbin.com/aciji4/6

reference Performance of jQuery selector with context

2
  • No, $('.con', '.content0') is not faster than $('.con') (slower, more likely). When you do $('.con', '.content0'), jQuery converts that into $('.content0').find('.con'). The first part $('.content0') takes just as long as $('.con'). Then you have the added time to look through those elements and find the .con elements within them. Oct 18, 2013 at 17:08
  • Proof: jsperf.com/extra-context-is-useless As you can see, adding extra context just slows it down (nearly doubling the time it takes). Context is only useful if you can reuse it, so the code $('.con', '.content0') will always be slower than $('.con'). If you had var context = $('.content'); and then repeatedly did context.find('.con'), you might get some benefit. Oct 18, 2013 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.