Javascript 如何使用 jQuery 检查 HTML 元素是否为空？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6813227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I check if an HTML element is empty using jQuery?
提问by vitto
I'm trying to call a function only if an HTML element is empty, using jQuery.
我试图仅在 HTML 元素为空时才使用 jQuery 调用函数。
Something like this:
像这样的东西：
if (isEmpty($('#element'))) {
// do something
}
回答by Emil
if ($('#element').is(':empty')){
//do something
}
for more info see http://api.jquery.com/is/and http://api.jquery.com/empty-selector/
有关更多信息，请参阅http://api.jquery.com/is/和http://api.jquery.com/empty-selector/
EDIT:
编辑：
As some have pointed, the browser interpretation of an empty element can vary. If you would like to ignore invisible elements such as spaces and line breaks and make the implementation more consistent you can create a function (or just use the code inside of it).
正如一些人指出的那样，浏览器对空元素的解释可能会有所不同。如果您想忽略不可见元素，例如空格和换行符，并使实现更加一致，您可以创建一个函数（或仅使用其中的代码）。
function isEmpty( el ){
return !$.trim(el.html())
}
if (isEmpty($('#element'))) {
// do something
}
You can also make it into a jQuery plugin, but you get the idea.
你也可以把它变成一个 jQuery 插件，但你明白了。
回答by Serge Shultz
I found this to be the only reliable way (since Chrome & FF consider whitespaces and linebreaks as elements):
我发现这是唯一可靠的方法（因为 Chrome 和 FF 将空格和换行符视为元素）：
if($.trim($("selector").html())=='')
回答by DMTintner
White space and line breaks are the main issues with using :empty selector. Careful, in CSS the :empty pseudo class behaves the same way. I like this method:
空格和换行符是使用 :empty 选择器的主要问题。小心，在 CSS 中 :empty 伪类的行为方式相同。我喜欢这个方法：
if ($someElement.children().length == 0){
someAction();
}
回答by DMTintner
!elt.hasChildNodes()
Yes, I know, this is not jQuery, so you could use this:
是的，我知道，这不是 jQuery，所以你可以使用这个：
!$(elt)[0].hasChildNodes()
Happy now?
现在开心？
回答by AlienWebguy
jQuery.fn.doSomething = function() {
//return something with 'this'
};
$('selector:empty').doSomething();
回答by Digital Plane
If by "empty", you mean with no HTML content,
如果“空”是指没有 HTML 内容，
if($('#element').html() == "") {
//call function
}
回答by jensgram
Empty as in contains no text?
空如不包含任何文本？
if (!$('#element').text().length) {
...
}
回答by RuiVBoas
In resume, there are many options to find out if an element is empty:
在简历中，有很多选项可以判断一个元素是否为空：
1- Using html:
1-使用html：
if (!$.trim($('p#element').html())) {
// paragraph with id="element" is empty, your code goes here
}
2- Using text:
2- 使用text：
if (!$.trim($('p#element').text())) {
// paragraph with id="element" is empty, your code goes here
}
3- Using is(':empty'):
3- 使用is(':empty')：
if ($('p#element').is(':empty')) {
// paragraph with id="element" is empty, your code goes here
}
4- Using length
4- 使用 length
if (!$('p#element').length){
// paragraph with id="element" is empty, your code goes here
}
In addiction if you are trying to find out if an input element is empty you can use val:
如果你想知道输入元素是否为空，你可以使用val：
if (!$.trim($('input#element').val())) {
// input with id="element" is empty, your code goes here
}
回答by dahlbyk
Another option that should require less "work" for the browser than html()or children():
与html()or相比，浏览器需要更少“工作”的另一个选项children()：
function isEmpty( el ){
return !el.has('*').length;
}
回答by MayorMonty
document.getElementById("id").innerHTML == "" || null
or
或者
$("element").html() == "" || null
