Jquery 或 Javascript 中的空 div 是什么意思

Question

我的 html 页面中有以下空白 div：

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

我需要用 html 动态更新这个 div，但在我这样做之前，我需要看看它是否为空。为此，我编写了以下 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 为空，这也会提醒第二条消息。任何人都可以向我解释为什么会这样以及如何将第一条消息放入警报中？

在此先感谢您的帮助。

Answer 1

你应该得到你的 id 的 html() 内容所以应该是

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

Answer 2

是换行符。似乎某些浏览器对此的解释与其他浏览器不同。

这样写：

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

你得到了你想要的行为。

相关：How do I check if an HTML element is empty using jQuery?

Answer 3

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 4

div其实不是空的，它里面有一个文本节点，算作non-empty个内容。使用这个 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>

Jquery 或 Javascript 中的空 div 是什么意思

What does an empty div mean in Jquery or Javascript

html

javascript

jquery

is-empty