Categories
javascript jquery

Is there an “exists” function for jQuery?

3048

How can I check the existence of an element in jQuery?

The current code that I have is this:

if ($(selector).length > 0) {
    // Do something
}

Is there a more elegant way to approach this? Perhaps a plugin or a function?

0

    2703

    In JavaScript, everything is ‘truthy’ or ‘falsy’, and for numbers 0 means false, everything else true. So you could write:

    if ($(selector).length)
    

    You don’t need that >0 part.

    6

    • 62

      @abhirathore2006 If you use an id selector and the element doesn’t exist then length is 0 and doesn’t throw exceptions.

      – Robert

      Jun 29, 2017 at 20:35

    • 21

      Interestingly enough NaN != false.

      – Robert

      Jun 29, 2017 at 20:52

    • 19

      @James That’s because [].toString() === [].join(',') === "" and "" === "".

      Jul 8, 2017 at 22:09


    • @Robert, that’s because NaN != a when a is literally any value.

      Nov 28, 2021 at 23:29

    • NaN may be != false, but NaN is definitely falsy, which is a slightly different thing

      May 11 at 14:36

    1415

    Yes!

    jQuery.fn.exists = function(){ return this.length > 0; }
    
    if ($(selector).exists()) {
        // Do something
    }
    

    This is in response to: Herding Code podcast with Jeff Atwood

    5

    • 260

      I just write: if( $(selector).length ){ … } without the ‘> 0’

      – vsync

      Nov 24, 2009 at 9:22

    • 375

      The $.fn.exists example is replacing a property lookup (cheap!) with two function calls, which are much more expensive—and one of those function calls recreates a jQuery object that you already have.

      – C Snover

      May 30, 2010 at 4:14


    • 218

      @redsquare: Code readability is the best rationale for adding this sort of function on jQuery. Having something called .exists reads cleanly, whereas .length reads as something semantically different, even if the semantics coincide with an identical result.

      – Ben Zotto

      Aug 2, 2010 at 20:52

    • 52

      @quixoto, sorry but .length is a standard across many languages that does not need wrapping. How else do you interpret .length?

      – redsquare

      Aug 3, 2010 at 0:13

    • 151

      In my opinion, it’s at least one logical indirection from the concept of “a list length that is greater than zero” to the concept of “the element(s) I wrote a selector for exist”. Yeah, they’re the same thing technically, but the conceptual abstraction is at a different level. This causes some people to prefer a more explicit indicator, even at some performance cost.

      – Ben Zotto

      Aug 3, 2010 at 0:29


    389

    If you used

    jQuery.fn.exists = function(){return ($(this).length > 0);}
    if ($(selector).exists()) { }
    

    you would imply that chaining was possible when it is not.

    This would be better:

    jQuery.exists = function(selector) {return ($(selector).length > 0);}
    if ($.exists(selector)) { }
    

    Alternatively, from the FAQ:

    if ( $('#myDiv').length ) { /* Do something */ }
    

    You could also use the following. If there are no values in the jQuery object array then getting the first item in the array would return undefined.

    if ( $('#myDiv')[0] ) { /* Do something */ }
    

    2

    • 23

      There are already methods that aren’t chainable, like attr and data functions. I do see your point though and, for what it’s worth, I just test for length > 0 anyways.

      Jan 16, 2009 at 5:42

    • 43

      Why on earth would you need to chain this? $(".missing").css("color", "red") already does the right thing… (i.e. nothing)

      – Ben Blank

      Sep 8, 2010 at 6:43