如何使用jQuery检查HTML元素是否为空？

我试图调用一个函数，只有当一个HTML元素是空的，使用jQuery。

像这样的东西：

if (isEmpty($('#element'))) { // do something } 

Answer 1

 if ($('#element').is(':empty')){ //do something } 

欲了解更多信息，请访问http://api.jquery.com/is/和http://api.jquery.com/empty-selector/

编辑：

正如一些人指出的，浏览器对空元素的解释可能会有所不同。 如果你想忽略不可见的元素，比如空格和换行符，并且使得实现更加一致，你可以创build一个函数（或者只是使用里面的代码）。

  function isEmpty( el ){ return !$.trim(el.html()) } if (isEmpty($('#element'))) { // do something } 

你也可以把它变成一个jQuery插件，但你明白了。

Answer 2

我发现这是唯一可靠的方式（因为Chrome和FF认为空格和换行符是元素）：

 if($.trim($("selector").html())=='') 

Answer 3

空白和换行符是使用中的主要问题：空select器。 小心，在CSS中：空伪类的行为方式是一样的。 我喜欢这个方法：

 if ($someElement.children().length == 0){ someAction(); } 

Answer 4

 jQuery.fn.doSomething = function() { //return something with 'this' }; $('selector:empty').doSomething(); 

Answer 5

 !elt.hasChildNodes() 

是的，我知道，这不是jQuery，所以你可以使用这个：

 !$(elt)[0].hasChildNodes() 

现在开心？

Answer 6

如果通过“空”，你的意思是没有HTML内容，

 if($('#element').html() == "") { //call function } 

Answer 7

空包含没有文字？

 if (!$('#element').text().length) { ... } 

Answer 8

另一个选项应该比html()或children()对浏览器要求更less的“工作”：

 function isEmpty( el ){ return !el.has('*').length; } 

Answer 9

 document.getElementById("id").innerHTML == "" || null 

要么

 $("element").html() == "" || null 

Answer 10

你在寻找jQuery.isEmptyObject() ？

http://api.jquery.com/jquery.isemptyobject/

Answer 11

这里有一个基于https://stackoverflow.com/a/6813294/698289的jQueryfilter

 $.extend($.expr[':'], { trimmedEmpty: function(el) { return !$.trim($(el).html()); } }); 

Answer 12

JavaScript的

 var el= document.querySelector('body'); console.log(el); console.log('Empty : '+ isEmptyTag(el)); console.log('Having Children : '+ hasChildren(el)); function isEmptyTag(tag) { return (tag.innerHTML.trim() === '') ? true : false ; } function hasChildren(tag) { //return (tag.childElementCount !== 0) ? true : false ; // Not For IE //return (tag.childNodes.length !== 0) ? true : false ; // Including Comments return (tag.children.length !== 0) ? true : false ; // Only Elements } 

尝试使用任何这个！

 document.getElementsByTagName('div')[0]; document.getElementsByClassName('topbar')[0]; document.querySelectorAll('div')[0]; document.querySelector('div'); // gets the first element.​ 

Answer 13

尝试这个：

 if (!$('#el').html()) { ... } 

Answer 14

 if($("#element").html() === "") { } 

Answer 15

换行符被认为是FF中元素的内容。

 <div> </div> <div></div> 

例如：

 $("div:empty").text("Empty").css('background', '#ff0000'); 

在IE中，这两个div都被认为是空的，在FF中只有最后一个是空的。

您可以使用@qwertymk提供的解决scheme

 if(!/[\S]/.test($('#element').html())) { // for one element alert('empty'); } 

要么

 $('.elements').each(function(){ // for many elements if(!/[\S]/.test($(this).html())) { // is empty } }) 

Answer 16

你可以试试：

 if($('selector').html().toString().replace(/ /g,'') == "") { //code here } 

*replace空白，只是incase;）