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

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 selector를 사용할 때의 주요 문제입니다.CSS에서는 :empty 의사 클래스가 동일하게 동작합니다.저는 이 방법을 좋아합니다.

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

!elt.hasChildNodes()

예, jQuery가 아니므로 다음을 사용할 수 있습니다.

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

지금 행복해?

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

$('selector:empty').doSomething();

"empty"가 HTML 콘텐츠가 없는 경우,

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

resume에서는 요소가 비어 있는지 여부를 확인하는 옵션이 많이 있습니다.

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
}

에 텍스트가 포함되지 않은 것처럼 비어 있습니까?

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

브라우저의 '작업'이 필요한 다른 옵션은html()또는children():

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

다음 작업을 수행할 수 있습니다.

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

*공백은 교체해 주세요.

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

또는

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

Vanilla javascript 솔루션:

if(document.querySelector('#element:empty')) {
  //element is empty
}

공백은 공백에 영향을 미치지만 코멘트는 영향을 주지 않는다는 점에 유의하십시오.자세한 내용은 빈 의사 클래스에 대한 MDN을 참조하십시오.

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의 마지막 div만 비어 있습니다.

@qwertymk에서 제공하는 솔루션을 사용할 수 있습니다.

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

또는

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

언급URL : https://stackoverflow.com/questions/6813227/how-do-i-check-if-an-html-element-is-empty-using-jquery