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!

24 responses

Tiago Soczek responded on with…

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

Aaron responded on with…

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 responded on with…

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

mipme kampfkoloss responded on with…

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

gonzalo responded on with…

Works like a charm :D thanks

Patrick Fitzgerald responded on with…

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

Phil responded on with…

Nice and simple - just what I need.

Cheers Aaron

Erik responded on with…

Nice, thanks! exactly what I needed

Jason responded on with…

Excellent tip!! thank you kindly.

Tim responded on with…

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 responded on with…

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 responded on with…

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 responded on with…

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

Radu responded on with…

I don’t know but any element in my page is length = 0 . Even html.length = 0.

Just tried with jQuery $(‘#someDiv’).parents(‘html’).length; return 0.

Firebug show all my elements 0 length …

Any ideas where the problem could be ?

alex responded on with…

thanks mate! was going crazy over this. thought id kill IE7 one more time because he kept throwing script errors at me :D

well thanks and have a good one!

Phil responded on with…

That’s just the thing I was looking for, Aaron. Thanks a lot.

Antonio responded on with…

Hi, I have got a question about this method. Is it possible to execute this “if exist” method on a page based on the DIV that exist in another page?

Johnny responded on with…

Why use jQuery for this when just plain ass javascript does the job? if(document.getElementById(“id”)) { }

Aaron responded on with…

@Johnny - because with jQuery you could use any old selector, not just an ID.

wasim responded on with…

if(‘#exist’)do some thing. else how to do some thing here what’s in else …. because ‘#exist ‘ always return JQuery object that is always true and condition never go to else part

om responded on with…

This trick helped….thanks.

safi responded on with…

Thanks, it’s so easy and clear

Thurein responded on with…

From programming language perspective, if((‘#div’).length > 0) makes more sense than if((‘#div’).length).

mycarma responded on with…

Terrific!!, This is what i need. thank you very much.

Comments are closed

Responses for this article have now been disabled. You can still email me directly through the contact form.