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 
}

在任何人提出之前，我已经使用了这个，这对于我正在尝试做的事情是公平的类比：

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

但是，这并不是一回事，在某些情况下可能会失败。

所以有人可以想到一个简单的方法直接检查缓存的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：更新以响应lonesomeday的评论 - 将parents()更改为'nearest（）`以提高效果

Answer 2

本机document.contains()方法应该比jQuery更快，以确定DOM中是否存在缓存的jQuery元素。

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

Answer 3

如果选择器未更改，只需重新初始化它：

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

如果要避免重复选择器字符串，请使用原始jQuery对象的selector属性：

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 4

在稍微变化的情况下，可以直接比较由jQuery对象$cached_elem包装的本机DOM元素。

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

除了检查$cached_elem是否仍在DOM中之外，这还可以告诉您它是否仍然是原始DOM元素，而不是在某些/部分页面刷新后重新创建的具有相同属性的元素。

检查缓存的jquery对象是否仍在DOM中

4 个答案: