controlla se l'oggetto jQuery memorizzato nella cache è ancora in DOM

Question

Qualcuno sa come stabilire se un oggetto jQuery memorizzato nella cache è diventato obsoleto, ad es. non è più nel DOM? Per esempio:

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

// .. and then later 

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

ho recentemente incontrato la situazione in cui il $ cached_elem viene rimosso dal DOM a causa di qualche altro evento. Quindi quello che vorrei fare:

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

Prima che qualcuno propone, ho già impiegato questo, che è un analogo equo per quello che sto cercando di fare:

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

Tuttavia, questo è non proprio la stessa cosa e potrebbe fallire in alcuni casi.

Quindi qualcuno può pensare a un modo semplice per controllare direttamente se un oggetto jQuery memorizzato nella cache è "obsoleto"? I può essere costretto a scrivere un plugin, se non ...

Answer 1

if($elem.closest('body').length > 0) sembra che potrebbe fare il trucco.

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

Edit: aggiornata in risposta al commento di Yi Jiang in modo che restituisca correttamente se suo elemento genitore viene rimosso

Edit 2: aggiornati in risposta alla lonesomeday di commento - modificato parents() a "closest"() per il miglioramento delle prestazioni

Answer 2

Se il selettore non è cambiata, basta reinizializzare esso:

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

Se si vuole evitare di duplicare la stringa di selezione, utilizzare la proprietà selector dell'oggetto jQuery originale:

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

In un caso leggermente variante, è possibile confrontare direttamente l'elemento DOM nativo racchiuso dall'oggetto jQuery $cached_elem.

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

Oltre a verificare se il $cached_elem è ancora in DOM, questo può dire se è ancora l'elemento DOM originale, piuttosto che una ri-creato uno con stessi attributi dopo un certo refresh della pagina/parziale.

Answer 4

Il metodo nativo document.contains() deve essere più veloce di jQuery per determinare se esiste un elemento jQuery memorizzato nella cache nel DOM.

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