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

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

像这样的东西:

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

16 Solutions collect form web for “如何使用jQuery检查HTML元素是否为空?”

 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插件,但你明白了。

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

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

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

 if ($someElement.children().length == 0){ someAction(); } 
 jQuery.fn.doSomething = function() { //return something with 'this' }; $('selector:empty').doSomething(); 
 !elt.hasChildNodes() 

是的,我知道,这不是jQuery,所以你可以使用这个:

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

现在开心?

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

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

空包含没有文字?

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

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

 function isEmpty( el ){ return !el.has('*').length; } 
 document.getElementById("id").innerHTML == "" || null 

要么

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

你在寻找jQuery.isEmptyObject()

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

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

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

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.​ 

尝试这个:

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

换行符被认为是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 } }) 

你可以试试:

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

*replace空白,只是incase;)

  • 什么是jQueryselect器中的“上下文”?
  • 当用户滚动到特定元素时使用jQuery触发事件
  • jQuery - 禁用表单域
  • 在更新到1.11.0之后,自动完成要求您在iOS中点击两次
  • ng-repeat结束事件
  • JavaScript吸pipe(告诉鼠标光标下像素的颜色)
  • 为什么定义一个匿名函数并将jQuery作为parameter passing给它?
  • 如何添加“只读”属性到<input>?
  • 以像素为单位的填充或边距值使用jQuery
  • jqueryvalidationdynamic表单input无效的插件
  • 如何在jQuery中重新加载/刷新元素(图片)