Как обнаружить, если div все еще находится в DOM

Я хочу знать, существует ли div внутри DOM или нет. У меня есть уведомление на сайте, на самой верхней части страницы, где пользователь может щелкнуть по нему, и это будет slideUp. У меня есть другое событие jquery, которое будет зависеть от того, будет ли этот div еще существовать в DOM. Я хочу простой script, который будет генерировать логическое значение того, существует ли это Div отсутствует или нет. Я попробовал

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

который, кажется, признает, есть ли div, но мне также нужно знать, если он НЕ существует, я попытался использовать "else", но не повезло.

Итак, что лучший способ проверить, существует ли элемент в DOM или нет?

UPDATE Хорошо, я ошибся, я не думаю, что он оставляет DOM на слайде, поэтому мне нужно знать, произошло ли sliedUp на элементе.

ОБНОВЛЕНИЕ 2 Наверное, я мог бы добавить $('#cookies_notification').css('display','none') к событию клика, когда уведомление прокручивается, затем оно обнаружит его. Это единственное решение, которое я могу себе представить.

ОБНОВЛЕНИЕ 3 О, добавив код css, удаляется эффект слайдов.

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

});

Как мне сделать слайд-шоу, а затем изменить отображение?

3 ответа

Если ваш селектор возвращает 0 элементов, он не может быть расположен в DOM.

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

Вот рабочий пример: http://jsfiddle.net/LT7g8/

В качестве альтернативы см. этот вопрос: Есть ли функция "существует" для 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.
}


Метод slideUp() скрывает, но не удаляет, поэтому проверка того, сохраняется ли элемент в DOM, не поможет.

", так как я могу определить, имел ли элемент событие слайд-шоу?"

Вы можете использовать :visible селектор в сочетании с .is(), чтобы проверить, отображается ли элемент в данный момент:

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

Это также касается случая, когда элемент '#cookies_notification' вообще не существует в DOM, поскольку $('#cookies_notification') возвращает пустой объект jQuery, для которого .is(':visible') будет false.

Другой способ, которым вы можете использовать селектор :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 все равно будет скрывать элемент.


Вы можете сделать это без JQuery: if(document.getElementById("cookies_notification") != null) должен сделать трюк.

licensed under cc by-sa 3.0 with attribution.