Что означает пустой div в Jquery или Javascript

У меня есть следующий пустой div внутри моей html-страницы:

<div id='onlineaccess' style='width:20em;'>
</div>

Мне нужно динамически обновлять этот div с помощью html, но прежде чем я это сделаю, мне нужно посмотреть, пуст он или нет. Для этого я написал следующий код JQuery и Javascript:

if($('#onlineaccess').is(':empty') ) 
{alert('No HTML inside of onlineaccess div');}
else
{alert('Some HTML inside of onlineaccess div');}

но это не дает результата, который я ищу, если div пуст.

if($('#onlineaccess').is(':empty') ) 
{alert('No HTML inside of onlineaccess div');}
else
{alert('Some HTML inside of onlineaccess div');}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='onlineaccess' style='width:20em;'>
    </div>

Это предупреждает второе сообщение, даже если div пуст. Может кто-нибудь объяснить мне, почему так и как я могу получить первое сообщение в оповещении?

Заранее спасибо за помощь.


javascript html jquery is-empty
person Rabia Rana Khan    schedule 11.02.2017    source источник
comment
:empty: выбрать все элементы, у которых нет дочерних элементов (включая текстовые узлы )   -  person Andreas    schedule 11.02.2017
comment
div не пусто. Он содержит пробелы.   -  person David    schedule 11.02.2017

Ответы (4)


arrow_upward
2
arrow_downward

https://api.jquery.com/empty-selector/

if($('#onlineaccess:empty') ) 
{alert('No HTML inside of onlineaccess div');}
else
{alert('Some HTML inside of onlineaccess div');}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='onlineaccess' style='width:20em;'>
    </div>

person Rikin    schedule 11.02.2017

arrow_upward
2
arrow_downward

Это разрыв строки. Кажется, некоторые браузеры интерпретируют это иначе, чем другие.

Напишите это так:

<div id='onlineaccess' style='width:20em;'></div>

и вы получите желаемое поведение.

Связанный: Как проверить, Элемент HTML пуст при использовании jQuery?

person mwallisch    schedule 11.02.2017
comment
Вместо того, чтобы помечать этот вопрос как дубликат, вы публикуете дубликат как часть своего ответа? о.о - person Andreas; 11.02.2017
comment
Не знаю, как это сделать. - person mwallisch; 12.02.2017

arrow_upward
0
arrow_downward

Вы должны получить содержимое html() вашего идентификатора, поэтому должно быть

  if($.trim($('#onlineaccess').html()) ==='' )
person scaisEdge    schedule 11.02.2017

arrow_upward
0
arrow_downward

На самом деле div не пуст, внутри него есть текстовый узел, который считается непустым содержимым. Используйте это внутри:

$(document).ready(function () {
  if ($("#onlineaccess").html() === "") {
    console.log('empty');
  } else {
    console.log('not empty');
  }
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='onlineaccess' style='width:20em;'>
</div>

person jetpackpony    schedule 11.02.2017