Обнаружить, если объект jQuery находится на странице или нет.

Учитывая объект jQuery, $j, мне нужно знать, представляет ли он что-то, что уже есть на странице, или если оно еще не было помещено на страницу. Например, если у меня есть это:

$j = $('#id-of-something-already-on-the-page');

или

$j = $('<p>Where is pancake house?</p>').appendTo($('#this-is-already-there'));

Затем у меня есть что-то на странице, и мне не нужно размещать его на странице. Но, если у меня есть это:

$j = $("<p>I'll cook you some eggs, Margie.</p>");

Затем мне нужно добавить его, прежде чем он появится на странице.

Вопрос в том, как вы спрашиваете $j, находится ли он на странице или нет? Я знаю два способа работы достаточно хорошо:

  • Посмотрите, есть ли у него родительский элемент: $j.parent().length > 0 означает, что он находится на странице.
  • Посмотрите, имеет ли он действительный индекс: $j.index() > -1 означает, что он находится на странице.

Я вижу, что первый из них не работает, если $j - это html или, возможно, body; Я рад проигнорировать эти два патологических случая. Я не могу думать о том, что второй подход потерпит неудачу.

Существует ли стандартный метод для запроса, является ли объект jQuery на странице или нет? Мне все равно, видно ли $j.

Ответы

Ответ 1

Лично я начинаю с того, что спускаюсь с элемента, который, как вы знаете, находится на странице, например <html> или <body>, и используйте .has():

if ($('html').has($j).length)
{
    // $j is in the page
}

Это работает даже для двух патологических случаев, которые вы упомянули. Это больше идиоматического, чтобы проверить .length, а не .size(). Также нет причин проверять, что возвращаемое значение > 0. Свойство length всегда будет неотрицательным целым числом, поэтому достаточно проверить правдоподобие значения.

Ответ 2

Я бы, наверное, просто проверил, может ли элемент достигнуть элемента body:

$j.closest('body').size()>0

Как вы отметили в других комментариях, это может привести к сбою в некоторых исключительных случаях, когда вы обрабатываете дополнительные элементы тела. Если вы действительно хотите обнаружить эти ситуации, я думаю, вы могли бы проверить, есть ли у вас несколько элементов $(body), но я подозреваю, что такие крайние случаи выйдут из-под контроля довольно быстро.

Эта проверка "может быть подключена к странице" может быть включена в bona-fide jQuery selector:

$.expr[':'].isProbablyAttached = function(obj){

    return $(obj).closest('body').size()>0;
};

// Usage:
$('.someClasses:isProbablyAttached').doSomething();

Ответ 3

С jQuery (по крайней мере, с версией 1.7.1) $('html').parent() возвращает непустой массив ([#document]):

$j = $("<p>I'll cook you some eggs, Margie.</p>");
$j.parent().length === 0
$('html').parent().length === 1
$('body').parent().length === 1

Так что "mu is too short" примечание не является проблемой:

Я вижу, что первый из них не работает, если $j является html или, возможно, телом; Я рад проигнорировать эти два патологических случая. Я не могу думать о том, что второй подход потерпит неудачу.

Ответ 4

Объект jQuery представляет собой набор элементов html.

После выбора: $j = $('# id-of-something-already-on-the-page');

Все, что вам нужно сделать, это проверить $j.length. Если он один, на странице есть один элемент.