How to check whether an element exists using jQuery

When using jQuery (or any other JavaScript library for that matter), have you ever wondered how to test whether an element exists using a selector? Well, maybe you haven’t, but I have – lots of times – so I thought I’d share how it’s done here because it’s not as simple as it seems.

The obvious thing would simply be to wrap a selector in an if statement, right?

if ($("#mydiv")){
    // do something here
}

Well, wrong – that won’t work! When you use a selector, jQuery will always return an object. Therefore the if statement will always be true and never be false. In the case of an element that does not exist on the page, jQuery will return an object with nothing in it – an empty object. And therein lies our solution.

With a jQuery selector we can also use the length property, which will return the size of the object. Do you see where I’m heading with this? That’s right, lets just change our if statement to:

if ($("#mydiv").length > 0){
    // do something here
}

Now our code works because when jQuery returns an empty object, the length property will return zero and therefore the if statement will be false. Hurrah!

Tagged: JavaScript, jQuery, Web Development

Share this article

Subscribe Digg del.icio.us StumbleUpon

19 fantastic comments

Tiago Soczek 2:36 pm, 10 October 2008

// this works too..
if ($(“#mydiv”).length){
// do something here
}

Aaron 2:43 pm, 10 October 2008

That’s true Tiago – cheers for sharing. I’ll leave my explanation as it is because I think the “greater than zero” operator illustrates why it would return true or not. But you solution is slightly more elegant

nickyflavier 8:28 am, 16 October 2008

You could also use
if($(“#mydiv”).size()) {
//do something
}

mipme kampfkoloss 8:40 am, 25 March 2009

Thx mate, just the thing i was looking for. Keep it up!

gonzalo 5:04 pm, 7 August 2009

Works like a charm thanks

Patrick Fitzgerald 3:20 pm, 28 August 2009

The easiest (smallest) test I have found is:
if ($(‘#mydiv’)[0]) {
// do something
}

Phil 3:23 pm, 9 November 2009

Nice and simple – just what I need.

Cheers Aaron

Erik 8:19 pm, 15 December 2009

Nice, thanks! exactly what I needed

Jason 4:02 pm, 13 January 2010

Excellent tip!! thank you kindly.

Tim 8:48 pm, 16 January 2010

Correct me if I’m wrong (which I very well could be), but I don’t think you’re using the jQuery selector engine without doing $(“#mydiv”) or jQuery(“#mydiv”). You’re using some default javascript selector.

Aaron 10:56 pm, 16 January 2010

Tim – Something funky is happening with my code snippets on this site. Some characters are being rendered in white text on a white background (the $ symbol in this case). Haven’t got a clue why, but I’ll look into it and try and fix it soon.

john 11:36 pm, 27 January 2010

looking at your css the pre tag that surrounds the $ is set to #FFFFFF by the rule #main .article pre unlike the rest of the contnet which is contained within span tag that set the colour to something else

Aaron 10:39 am, 28 January 2010

Cheers John! Saved me looking into it Code on my site is now fixed.