Typically in JavaScript I do something like the below to verify an element does exist:
if (document.getElementById('lblUpdateStatus')) {
$("#lblUpdateStatus").text("");
}
But, using jQuery - how can I do the same type of thing?
-
Dupe: stackoverflow.com/questions/950563/…karim79– karim792009-06-22 13:11:07 +00:00Commented Jun 22, 2009 at 13:11
Add a comment
|
8 Answers
$ returns an array of matching elements, so check the length property and you're good to go
if ($('#lblUpdateStatus').length) {
$("#lblUpdateStatus").text("");
}
Comments
The get method returns the matched DOM elements:
if($("#lblUpdateStatus").get(0)){
$("#lblUpdateStatus").click(function () { ... });
}
but I am not sure if it is a fast method.
Comments
The thing is that the jQuery will only do the requested action if the element exists :-), so you only need:
$("#lblUpdateStatus").text("");
Comments
I see no reason to use jQuery just for the sake of it. the $('#lblUpdateStatus') will basically go straight to document.getElementById('lblUpdateStatus'), as the selector has an anchor in it, so you're not really gaining anything. Also, for just checking if the DOM object exists, wrapping it in a jQuery object will create quite a lot of overhead.
On the other hand, if just changing the text property of the object is what you want to do, you don't need to check for its existence if you use jQuery.
if (document.getElementById('lblUpdateStatus')) {
$("#lblUpdateStatus").text("");
}
will do the exact same thing as having just
$("#lblUpdateStatus").text("");
3 Comments
Tomas Aschan
@Kieran:
document.getElementById('lblUpdateStatus') might be easier to read (I don't think so, but I guess it's a matter of habit), but you risk running into null reference errors if you try to do something with whatever that statement returns, and there is no such element on the page. The jQuery method will in that case just silently do nothing (which might or might not be what the OP intended...)
Kieran
Yep it will return null if it is not there. I am not sure what tests the OP wanted either,
JBeckton
For the sake of common patterns and implementations. If you co mingle vanilla js and jquery to accomplish similar tasks your code base will be terrible. The speed difference is not noticeable 98% of the time. Additionally there is the underlying cross browser support you get with jquery. Are you going to write multiple lines of vanilla js to support all browsers just to get a millisecond of performance over a single line of jquery? And as mentioned you would have to also check for nulls, so you get more out of a single line of jquery over vanilla js.
From jQuery 1.4 onwards you can use $.contains().
var test = $("<div>");
$.contains(window.document, test[0]); // false
$("body").append(test);
$.contains(window.document, test[0]); // true
1 Comment
jstaab
The other answers work for the question asked, but this is the only one that works if you want to check whether an old element that you have a reference to still exists in the dom.
I wrote a post about that on my blog
if ( $('#element_id').length > 0 )
console.log('the element with element_id exists in the DOM');
1 Comment
Nosredna
Which is the same as if ($('#element_id').length) { console.log('the element with element_id exists in the DOM'); } (Essentially DanF's answer above.)
If HTML string can be passed into $(), you can use parent.length:
$('<div>').length // 1, but it not exist on page
but
$('<div>').parent().length // 0
Comments
I would use this. Calculate the lenght of the node list:
document.querySelectorAll('#lblUpdateStatus').length
