jQuery를 사용하여 HTML 요소가 비어 있는지 어떻게 확인합니까?

jQuery를 사용하여 HTML 요소가 비어있는 경우에만 함수를 호출하려고합니다.

이 같은:

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

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

자세한 내용은 http://api.jquery.com/is/ 및 http://api.jquery.com/empty-selector/를 참조하십시오.

편집하다:

일부 사람들이 지적했듯이 빈 요소에 대한 브라우저 해석은 다를 수 있습니다. 공백과 줄 바꿈과 같은 보이지 않는 요소를 무시하고 구현을보다 일관성있게 만들려면 함수를 만들거나 코드를 사용하십시오.

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

jQuery 플러그인으로 만들 수도 있지만 아이디어를 얻을 수 있습니다.

Chrome과 FF에서 공백과 줄 바꿈을 요소로 간주하기 때문에 이것이 신뢰할 수있는 유일한 방법이라는 것을 알았습니다.

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

공백과 줄 바꿈은 : empty 선택기를 사용하는 주요 문제입니다. CSS에서 : empty pseudo 클래스는 같은 방식으로 작동합니다. 나는이 방법을 좋아한다 :

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
}

텍스트가 포함되지 않은 상태로 비어 있습니까?

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

이력서에는 요소가 비어 있는지 확인하는 많은 옵션이 있습니다.

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;
}

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

또는

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

당신은 시도 할 수 있습니다:

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

* 공백을 대치하십시오.;)

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

}

찾고 jQuery.isEmptyObject()있습니까?

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

다음은 https://stackoverflow.com/a/6813294/698289를 기반으로 한 jQuery 필터입니다.

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

자바 스크립트

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()) {
    ...
}

줄 바꿈은 FF에서 요소의 내용으로 간주됩니다.

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

전의:

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

IE에서 두 div는 모두 비어있는 것으로 간주되며 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
    }
})