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

Question

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

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

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

if($('#onlineaccess').is(':empty')) 
{alert('No HTML inside of onlineaccess div');} 
else 
{alert('Some HTML inside of onlineaccess 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>

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

Заранее благодарим за помощь.

Answer 1

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>

Answer 2

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

if($.trim($('#onlineaccess').html()) ==='') 

Answer 3

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

Написать это таким образом:

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

и вы получите от предполагаемого поведения.

Похожие: How do I check if an HTML element is empty using jQuery?

Answer 4

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

$(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>

Answer 5

var check = !$.trim($('#div').html()).length; 
 

 
if (check) { 
 
    console.log('no html'); 
 
} else { 
 
    console.log('some html'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

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