如何检查一个dom元素是否存在

http://www.aaronrussell.co.uk/blog/check-if-an-element-exists-using-jquery/


Monday, 15 September 2008

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

Related articles:

jQuery Plugin released: Simply Smart Login Fields
jQuery plugin released: Simply Countable
What do you think of the IE9 platform preview?
Share this article
SubscribeDiggdel.icio.usStumbleUpon

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 2008That’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 2008You could also use
if($(“#mydiv”).size()) {
//do something
}


mipme kampfkoloss 8:40 am, 25 March 2009Thx mate, just the thing i was looking for. Keep it up!


gonzalo 5:04 pm, 7 August 2009Works like a charm

thanks


Patrick Fitzgerald 3:20 pm, 28 August 2009The easiest (smallest) test I have found is:
if ($(‘#mydiv’)[0]) {
// do something
}


Phil 3:23 pm, 9 November 2009Nice and simple – just what I need.

Cheers Aaron


Erik 8:19 pm, 15 December 2009Nice, thanks! exactly what I needed


Jason 4:02 pm, 13 January 2010Excellent tip!! thank you kindly.


Tim 8:48 pm, 16 January 2010Correct 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 2010Tim – 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 2010looking 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 2010Cheers John! Saved me looking into it

Code on my site is now fixed.


Radu 3:20 pm, 12 February 2010I 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 9:08 am, 26 February 2010thanks 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!


Phil 6:42 pm, 16 June 2010That’s just the thing I was looking for, Aaron. Thanks a lot.


Antonio 10:12 am, 22 June 2010Hi,
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 11:06 am, 19 August 2010Why use jQuery for this when just plain ass javascript does the job?
if(document.getElementById(“id”)) {
}


Aaron 1:12 pm, 24 August 2010@Johnny – because with jQuery you could use any old selector, not just an ID.