Menu
Given a jQuery object, $j, I need to know if it represents something that is already on the page or if it is something that has not yet been put on the page. For example, if I have this:
$j = $('#id-of-something-already-on-the-page');
or
$j = $('<p>Where is pancake house?</p>').appendTo($('#this-is-already-there'));
Then I have something on the page and I don't need to put it on the page. But, if I just have this:
$j = $("<p>I'll cook you some eggs, Margie.</p>");
Then I'd need to append it before it is on the page.
The question is how do you ask $j if it is on the page or not? I know two ways the work well enough:
$j.parent().length > 0 implies that it is on the page.$j.index() > -1 implies that it is on the page.I can see the first one failing if $j is the html or possibly body; I'm happy to ignore those two pathological cases. I can't think of any way that the second approach would fail.
Is there a standard technique for asking if a jQuery object is on the page or not? I don't care if $j is visible.
956
In jQuery, you can use the . length property to check if an element exists. if the element exists, the length property will return the total number of the matched elements. To check if an element which has an id of “div1” exists.
The best way to check the instance of an object is through instanceof operator or with the method isPrototypeOf() which inspects if the prototype of an object is in another object's prototype chain.
$() = window. jQuery() $()/jQuery() is a selector function that selects DOM elements. Most of the time you will need to start with $() function. It is advisable to use jQuery after DOM is loaded fully.
Personally, I'd start by descending from an element you know is in the page, like <html> or <body>, and use .has():
if ($('html').has($j).length)
{
// $j is in the page
}
This works even for the two pathological cases you mentioned. It's more idiomatic to check .length rather than .size(). There's also no reason to check that the value returned is > 0. The length property will always be a nonnegative integer, so it's sufficient to check the truthiness of the value.
117
I'd probably just check to see if the element can reach the body element:
$j.closest('body').size()>0
As you noted in other comments, this would fail in some exceptional cases where you are handling extra body elements. If you really want to detect those situations, I guess you could check to see if you have multiple $(body) elements but I suspect that such extreme cases will get out of control pretty quickly.
This "is-probably-attached-to-page" check could be turned in to a bona-fide jQuery selector, too:
$.expr[':'].isProbablyAttached = function(obj){
return $(obj).closest('body').size()>0;
};
// Usage:
$('.someClasses:isProbablyAttached').doSomething();
With jQuery (at least with version 1.7.1) $('html').parent() returns a non-empty array ([#document]):
$j = $("<p>I'll cook you some eggs, Margie.</p>");
$j.parent().length === 0
$('html').parent().length === 1
$('body').parent().length === 1
So 'mu is too short''s note is not an issue:
I can see the first one failing if $j is the html or possibly body; I'm happy to ignore those two pathological cases. I can't think of any way that the second approach would fail.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
