Monday, 15 September 2008
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!
19 fantastic comments
// this works too..
if ($(“#mydiv”).length){
// do something here
}
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 
You could also use
if($(“#mydiv”).size()) {
//do something
}
Thx mate, just the thing i was looking for. Keep it up!
Works like a charm 
thanks
The easiest (smallest) test I have found is:
if ($(‘#mydiv’)[0]) {
// do something
}
Nice and simple – just what I need.
Cheers Aaron
Nice, thanks! exactly what I needed
Excellent tip!! thank you kindly.
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.
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.
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
Cheers John! Saved me looking into it Code on my site is now fixed.
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 ?
thanks mate! was going crazy over this. thought id kill IE7 one more time because he kept throwing script errors at me
well thanks and have a good one!
That’s just the thing I was looking for, Aaron. Thanks a lot.
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?
Why use jQuery for this when just plain ass javascript does the job?
if(document.getElementById(“id”)) {
}
@Johnny – because with jQuery you could use any old selector, not just an ID.
What are your thoughts?
