Question

我想知道DOM中是否存在div。我在网站上有一个通知，在页面的最顶部，用户可以点击它，然后它会滑动。我有另一个jquery事件，这取决于知道这个div是否仍然存在于DOM中。我想要一个简单的脚本，它将产生一个布尔值，该值是否存在此Div。我试过了

if($('#cookies_notification').css('display','block'))

似乎承认div是否存在，但我还需要知道它是否存在，我尝试使用'else'但没有运气。

那么检查DOM中是否存在元素的最佳方法是什么？

UPDATE 好吧，我错了，我不认为它会在slideUp上留下DOM，所以我需要知道元素上是否出现了sliedUp。

更新2 我想我可以在通知向上滚动时向点击事件添加$('#cookies_notification').css('display','none')，然后它会检测到它。这是我能想到的唯一解决方案。

更新3 哦，添加css代码会删除滑动效果。

$("#cookies_notification").click(function(){
$(this).slideUp().css('display','none');

}）;

如何进行滑动然后更改显示？

Answer 1

如果你的选择器返回0个元素，那么它就不能位于DOM中。

if( $('#cookies_notification').length === 0 ) {
    // Do something
}

以下是一个工作示例：http://jsfiddle.net/LT7g8/

或者，请看这个问题： Is there an “exists” function for jQuery?

如果您只是想知道对象是否被隐藏（并且DOM中没有完全没有），请查看jQuery :hidden selector。如果元素存在但已被隐藏，则此选择器将返回该元素。如果元素不存在，它也不会选择它，也不会选择该元素是否可见。

对于您的情况，听起来您希望首先检测元素是否存在，然后检测它是否已被SlideUp()隐藏。

var objCookieNotification = $('#cookies_notification');
if ( objCookieNotification.length === 0 ) {
    // Notification does not exist in the DOM.
    // Add it to the DOM here.
} else if ( objCookieNotification.is(':hidden') ) {
    // Notification exists in the DOM but is hidden.
    // Make it visible again here.
} else {
    // The notification exists in the DOM and is already visible.
    // If you need to make it flash or something, you can do that here.
}

Answer 2

你可以在没有JQuery的情况下做到这一点：if(document.getElementById("cookies_notification") != null)可以做到这一点。

Answer 3

slideUp（）方法隐藏但不删除，因此测试该元素是否仍在DOM中将无济于事。

“那么如何检测元素是否有滑动事件？”

您可以将:visible selector与.is() method结合使用来测试该元素当前是否可见：

if ($('#cookies_notification').is(':visible')) {
   // element is visible, so do something
}

这也将涵盖DOM中根本不存在'#cookies_notification'元素的情况，因为$('#cookies_notification')将返回一个空的jQuery对象，.is(':visible')将为false。

您可以使用:visible选择器实现此目的的另一种方式与上面的第一个答案类似：

if( $('#cookies_notification:visible').length > 0 ) {
    // element is visible, so do something
}

也就是说，仅在可见时选择元素，然后查看生成的jQuery对象是否为空。

要测试某个元素是否存在但不可见，您可以使用:hidden selector：

if ($('#cookies_notification').is(':hidden')) {

在您的某个更新中，您还询问了此代码：

$(this).slideUp().css('display','none');

在没有向上滑动的情况下立即隐藏元素的原因是.slideUp()是一种异步动画方法 - 当你调用它时，它会对动画进行排队，但该方法会立即返回。因此，在完成上滑之前执行.css()部分，立即隐藏元素。您不需要包含.css()部分，因为一旦完成上滑动画，jQuery就会隐藏元素。

如何检测div是否仍在DOM中

3 个答案: