SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Does jQuery chain stop if element not found?

    Are these two approaches functionally the same?

    Code:
    $(function() {
        $('#menu').css('font-weight', 'bold').fadeIn();
    });

    Code:
    $(function() {
        // Find the menu.
        var $menu = $('#menu');
    
        // If the menu wasn't found, get out of here.
        if (!$menu.length) {
            return;
        }
    
        // Do the chaining stuff.
        $menu.css('font-weight', 'bold').fadeIn();
    });
    What's strange to me is I've tried to do a lot of reading on jQuery chaining/chainability, but I've never been able to find any documentation that discusses what happens when you chain and run functions against an element(s) that doesn't exist?

    So I've been writing a bunch of my code using the latter approach, but I'm wondering my code bloat is unnecessary. Either way doesn't throw errors, but I'm just curious if jQuery is still trying to process the chain on stuff that doesn't exist, making the first approach inefficient.

    Thanks.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    If jQuery can't make an element selection it will return nothing which will cause the methods following the selection to fail since no jQuery object exists before them, with your above code you can simplify it by using the following:

    Code JavaScript:
    $(function() {
        // Find the menu.
        var $menu = $('#menu');
     
        // If the menu wasn't found, get out of here.
        if ($menu.length) {
            $menu.css('font-weight', 'bold').fadeIn();
        }
    });

  3. #3
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,276
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    Actually, if jQuery can't make an element selection, then it still returns a jQuery object (that's why you can check the length). The following css() and fadeIn() methods won't cause any errors. They simply won't do anything, because they won't have any elements to do anything to. In short, champ, your answer is yes, the two approaches in your post are functionally the same.

    You can test this by running:

    $('#something-that-doesnt-exist').css('font-weight', 'bold').fadeIn();
    "First make it work. Then make it better."

  4. #4
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    chris.upjohn, and Jeff. Thanks for your responses.

    Ok. So it's harmless to chain stuff on an element that doesn't exist because it doesn't throw an error.

    I guess my final question is, is it inefficient to chain something that doesn't exist? Won't each section of the chain be performing some sort of existence check against the jQuery object, which is a waste of processing time/memory? Or am I getting into micro-optimization that really shouldn't concern me? Just don't ever bother with a $obj.length test and chain straightaway?

  5. #5
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,276
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    http://jsperf.com/ is great for testing questions like this. I suspect the result will be that your second approach will execute faster than your first approach when there are no elements. However, I also suspect that the performance difference will be imperceptible, and so yes, I think you're getting into micro-optimizations that you don't really need to be concerned with. Generally, the rule of thumb is to write your code first and foremost for humans. Focus on readability and simplicity. Then profile your code to find where most of the time is being spent, and optimize only those cases where optimization will have a significant impact.
    "First make it work. Then make it better."

  6. #6
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jeff. That makes sense. I appreciate your help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •