Question

您好，我有一个div，其中包含一些内容，但是当它为空时，我希望它说div为空

这是我的代码

-lvl53l1

Answer 1

CSS恰好有一个伪类:empty用于此目的。使用它来找到正确的div，并使用CSS伪元素::before插入要在空div中显示的文本：

.results:empty::before {
  content: "I feel so empty";
  color: #999;
}

<div class="results">Hello</div>
<div class="results"></div>

Answer 2

您可以按<div>来检查.text()的文本内容，使用trim()删除空格。

var isEmpty = $('.results').text().trim() === '';
console.log( isEmpty );

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

Answer 3

您可以像这样使用 jquery ：

if ($('.results').is(':empty')){
  // insert code here
}

编辑：#div是一个占位符。

编辑2：将#div更改为.results

if ($('.results').is(':empty')){
  console.log('empty');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">Hello</div>
<div class="results"></div>
<div class="results">World</div>

Answer 4

您可以创建自己的。您可以使用$.html()获取div的所有内容，因此请检查

if $("myDiv").html() == ""

这就是你的答案。

您可以将其作为独立功能

function isDivEmpty(elementId){
    return $(elementId).html() == "";
}

或扩展jQuery以在任何地方访问它。

$.fn.isEmpty = function(){
    return $(this).html() == "";
}
// usage
alert($("#test").isEmpty()); // alerts true or false

Answer 5

使用普通javascript

 var isEmpty = document.getElementsByClassName('results').innerHTML === "";

使用jQuery

 var isEmpty = $(".results").html() === "";

Answer 6

另一种检查div是否为空的方法：

var isEmpty = !$(".results")[0].hasChildNodes();
console.log(isEmpty);

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

Answer 7

您可以在此处找到有效的解决方案 https://jsfiddle.net/06nLec5t/8/

使用ID标识空的div名称，也可以排除该名称。

如何检查div是否为空

7 个答案: