Does jQuery chain stop if element not found?

JavaScript
1

Are these two approaches functionally the same?

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

$(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

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:

$(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

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();

4

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

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.

6

Thanks Jeff. That makes sense. I appreciate your help.