проверьте, находится ли кэшированный объект jquery в DOM

Question

Кто-нибудь знает, как определить, устарел ли кэшированный объект jQuery, например, больше не находится в DOM?Например:

var $cached_elem = $('.the_button');

// .. and then later

$cached_elem.text('updating...');

Недавно я столкнулся с ситуацией, когда $ cached_elem удаляется из DOM из-за какого-то другого события.Итак, что я хотел бы сделать:

if ( $cache_elem.isStillInDOM() ){
  // now do time consuming stuff with $cached_elem in DOM 
}

Прежде чем кто-либо предлагает, я уже использовал это, что является справедливым аналогом того, что я пытаюсь сделать:Тем не менее, это не совсем то же самое, и в некоторых случаях может произойти сбой.

Так может ли кто-нибудь придумать простой способ напрямую проверить, является ли кэшированный объект jQuery «устаревшим»?Я могу быть вынужден написать плагин, если нет ...

Answer 1

if($elem.closest('body').length > 0) кажется, что это может сработать.

$(function() {
    var $button = $(".the_button");
    alert (isStale($button));
    $button.remove();
    alert (isStale($button));
});
    
function isStale($elem)
{
    return $elem.closest("body").length > 0;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <span class="the_button">Hello World</span>
</div>

Редактировать: Обновлено в ответ на комментарий И Цзяна, так что он вернется правильно, если его родительский элемент будет удален

Редактировать 2: Обновлено в ответ на комментарий Loneomeday - изменено parents() на 'closest () `для улучшения производительности

Answer 2

Собственный метод document.contains() должен быть быстрее, чем jQuery, чтобы определить, существует ли кэшированный элемент jQuery в DOM.

if (document.contains($cached_elem[0])) {
    // Element is still in the DOM
}

Answer 3

В слегка альтернативном случае можно напрямую сравнить собственный элемент DOM, обернутый объектом jQuery $cached_elem.

$cached_elem[0] === $($cached_elem.selector)[0]

Помимо проверки того, что $cached_elem все еще находится в DOM, это может сказать вам, является ли это все еще исходным элементом DOM, а не воссозданным с теми же атрибутами после определенного / частичного обновления страницы.

Answer 4

Если селектор не изменился, просто повторно инициализируйте его:

var $cached_elem = $('.the_button');
// code that might remove some elements of $cached_elem
$cached_elem = $('.the_button');

Если вы хотите избежать дублирования строки селектора, используйте свойство selector исходного объекта jQuery:

var $cached_elem = $('.the_button');
// code that might remove some elements of $cached_elem
$cached_elem = $($cached_elem.selector);
if ($cached_elem.length) {
  // element still exists
}