comprueba si el objeto jquery almacenado en caché todavía está en DOM

Question

¿Alguien sabe cómo saber si un objeto jQuery almacenado en caché se ha quedado obsoleto, p. ya no está en el DOM? Por ejemplo:

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

// .. and then later 

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

que he encontrado recientemente la situación en la que $ cached_elem se retira del DOM debido a algún otro evento. Así que lo que me gustaría hacer:

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

Antes de que nadie ofrece, ya he empleado este, que es un análogo justo por lo que estoy tratando de hacer:

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

Sin embargo, esto es no es realmente lo mismo y podría fallar en algunos casos.

Entonces, ¿alguien puede pensar en una forma sencilla de verificar directamente si un objeto jQuery almacenado en caché está "obsoleto"? I puede ser obligado a escribir un plugin si no ...

Answer 1

if($elem.closest('body').length > 0) parece que podría hacer el truco.

$(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>

Editar: actualizado en respuesta al comentario de Yi Jiang modo que le proporcione correctamente si su elemento padre se retira

Edición 2: Actualizado en respuesta a lonesomeday de comentario - ha cambiado parents() a 'más cercano() `para la mejora del rendimiento

Answer 2

Si el selector no ha cambiado, simplemente reinicializarla:

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

Si se quiere evitar la duplicación de la cadena de selección, utilice la propiedad selector del objeto jQuery originales:

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 
} 

Answer 3

En un caso ligeramente variante, se puede comparar directamente el elemento DOM nativo envuelto por el objeto jQuery $cached_elem.

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

Además de comprobar si el $cached_elem se encuentra todavía en DOM, éste puede decir que si sigue siendo el elemento DOM original, en lugar de una re-creado uno con mismos atributos después de cierta actualización de la página/parcial.

Answer 4

El método nativo document.contains() debe ser más rápido que jQuery para determinar si existe un elemento jQuery en caché en el DOM.

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