Как проверить, пуст ли элемент HTML с помощью jQuery?
Я пытаюсь вызвать функцию, только если элемент HTML пуст, используя jQuery.
что-то вроде этого:
if (isEmpty($('#element'))) {
// do something
}
17 ответов
if ($('#element').is(':empty')){
//do something
}
подробнее:http://api.jquery.com/is/ и http://api.jquery.com/empty-selector/
EDIT:
как указывали некоторые, интерпретация пустого элемента в браузере может отличаться. Если вы хотите игнорировать невидимые элементы, такие как пробелы и разрывы строк, и сделать реализацию более согласованной, вы можете создать функцию (или просто использовать код внутри нее).
function isEmpty( el ){
return !$.trim(el.html())
}
if (isEmpty($('#element'))) {
// do something
}
вы также можете сделайте его в плагин jQuery, но вы получите идею.
Я нашел, что это единственный надежный способ (так как Chrome & FF рассматривает пробелы и linebreaks как элементы):
if($.trim($("selector").html())=='')
пробелы и разрывы строк основные проблемы с использованием :пустой селектор. Осторожно, в CSS: пустой псевдо-класс ведет себя так же. Мне нравится этот метод:
if ($someElement.children().length == 0){
someAction();
}
!elt.hasChildNodes()
Да, я знаю, это не jQuery, поэтому вы можете использовать этот:
!$(elt)[0].hasChildNodes()
теперь счастлив?
jQuery.fn.doSomething = function() {
//return something with 'this'
};
$('selector:empty').doSomething();
Если под "пустым" вы подразумеваете отсутствие содержимого HTML,
if($('#element').html() == "") {
//call function
}
в резюме есть много вариантов, чтобы узнать, если элемент пуст:
1 - с помощью html
:
if (!$.trim($('p#element').html())) {
// paragraph with id="element" is empty, your code goes here
}
2 - с помощью text
:
if (!$.trim($('p#element').text())) {
// paragraph with id="element" is empty, your code goes here
}
3 - с помощью is(':empty')
:
if ($('p#element').is(':empty')) {
// paragraph with id="element" is empty, your code goes here
}
4 - с помощью length
if (!$('p#element').length){
// paragraph with id="element" is empty, your code goes here
}
в зависимости, если вы пытаетесь выяснить, является ли элемент ввода пустым, вы можете использовать val
:
if (!$.trim($('input#element').val())) {
// input with id="element" is empty, your code goes here
}
другой вариант, который требует меньше "работы" для браузера, чем html()
или children()
:
function isEmpty( el ){
return !el.has('*').length;
}
можно попробовать:
if($('selector').html().toString().replace(/ /g,'') == "") {
//code here
}
* заменить пробелы, просто incase;)
вот фильтр jQuery на основеhttps://stackoverflow.com/a/6813294/698289
$.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.
разрывы строк рассматриваются как содержимое элементов в FF.
<div>
</div>
<div></div>
Ex:
$("div:empty").text("Empty").css('background', '#ff0000');
в IE оба divs считаются пустыми,в FF Chrome только последний пуст.
вы можете использовать решение, предоставленное @qwertymk
if(!/[\S]/.test($('#element').html())) { // for one element
alert('empty');
}
или
$('.elements').each(function(){ // for many elements
if(!/[\S]/.test($(this).html())) {
// is empty
}
})