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.
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.
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.