3

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

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

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

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

更新好吧，我错了，我认为它不会将 DOM 留在 slideUp 上，所以我需要知道元素上是否发生了 sliedUp。

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

更新 3 哦，添加 css 代码消除了上滑效果。

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

});

我怎样才能让它上滑然后改变显示？

4

3 回答 3

2

如果您的选择器返回 0 个元素，则它不能位于 DOM 中。

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

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

或者，请参阅这个问题： jQuery 是否存在“存在”函数？

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

对于您的情况，听起来您想先检测元素是否存在，然后检测它是否已被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.
}
于 2013-05-09T21:37:28.933 回答
0

您可以在没有 JQuery 的情况下执行此操作：if(document.getElementById("cookies_notification") != null)应该可以解决问题。

于 2013-05-09T21:39:18.627 回答
0

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

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

可以结合使用:visible选择器的.is()方法来测试元素当前是否可见：

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

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

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

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

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

要测试元素是否存在但不可见，您可以使用:hidden选择器：

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

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

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

在不上滑的情况下立即隐藏元素的原因是这.slideUp()是一种异步动画方法 - 当您调用它时，它会将动画排队，但随后该方法立即返回。因此，您的.css()部分在上滑完成之前执行，立即隐藏元素。您不需要包含该.css()部分，因为一旦上滑动画完成，jQuery 无论如何都会隐藏该元素。

于 2013-05-09T22:54:38.630 回答