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:
- See if it has a parent:
$j.parent().length > 0implies that it is on the page.
- See if it has a valid index:
$j.index() > -1implies 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.
Source: Tips4all
Personally, I'd start by descending from an element you know is in the page, like <html> or <body>, and use .has():
ReplyDeleteif ($('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() (see the FAQ). 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:
ReplyDelete$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();
The jQuery object represents a collection of html elements.
ReplyDeleteAfter your selection: $j = $('#id-of-something-already-on-the-page');
All you have to do is check $j.length. If it's one, there is one item on the page.