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

Кто-нибудь знает, как сказать, что кешированный объект 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 
}

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

if ( $cached_elem.is(':visible') === true ){ ... }

Однако это не совсем то же самое и может быть неудачно в некоторых случаях.

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

Ответы

Ответ 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

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

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

Ответ 3

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

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
}

Ответ 4

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

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

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