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

给定一个 HTML 文档并从 HTML 文档中选择一个元素并检查该元素是否为空。有两种方法可以用来解决这个问题，下面讨论：

方法一：使用“:empty”选择器：要检查的元素使用is()方法。 is() 方法用于检查所选元素之一是否与选择器元素匹配。这个方法可以用在这个元素上，通过使用“:empty”选择器来测试它是否为空。 “:empty”选择器用于选择所有没有子元素的元素。如果元素为空则返回真，否则返回假。

句法：

$('#elementSelector').is(':empty')

例子：

  

    
        How to check an HTML element
        is empty using jQuery ?
    
      
    
    
          
    
        #empty {
            background-color: green;
            height: 50px;
            border: solid;
        } 
  
        #not-empty {
            background-color: lightgreen;
            height: 50px;
            border: solid;
            text-align: center;
        } 
    

  

    
        GeeksForGeeks
    
      
    
        How to check if an HTML element
        is empty using jQuery?
    
      
    
        Click on the button to check if
        the paragraph elements are empty.
    
      
    The div below is empty.
    
  
    The div below is not empty.
    This element has something!
  
    
        First div is empty: 
        
    
      
    
        Second div element is empty: 
        
    
  
    
        Check if empty
    
  
    
        function checkifEmpty() {
            if ($('#empty').is(':empty')) {
                document.querySelector('.output1').textContent = true;
            }
            else {
                document.querySelector('.output1').textContent = false;
            }
  
            if ($('#not-empty').is(':empty')) {
                document.querySelector('.output2').textContent = true;
            }
            else {
                document.querySelector('.output2').textContent = false;
            }
              
        };
    

  
                    

输出：

• 点击按钮前：
  
• 点击按钮后：
  

方法 2：使用 length 属性：在此元素上使用 length 属性来确定其长度。它查找 jQuery 元素中对象的数量。长度为 0 表示该元素中没有其他元素。 0 以外的任何值都表示存在某个元素。这可用于检查元素是否为空。

句法：

$('#elementSelector').length

例子：

      

    
        How to check if an HTML element
        is empty using jQuery?
    
      
    
    
      
    
        #empty {
            background-color: green;
            height: 50px;
            border: solid;
        } 
  
        #not-empty {
            background-color: lightgreen;
            height: 50px;
            border: solid;
            text-align: center;
        } 
    

  

    
        GeeksForGeeks
    
      
    
        How to check if an HTML element
        is empty using jQuery?
    
      
    
        Click on the button to check if 
        the paragraph elements are empty.
    
      
    The div below is empty.
    
  
    The div below is not empty.
    
        This element has something!
    
  
    
        First div is empty: 
        
    
    
        Second div element is empty: 
        
    
  
    
        Check if empty
    
      
  
    
        function checkifEmpty() {
            if ($('#empty').length) {
                document.querySelector('.output1').textContent = true;
            }
            else {
                document.querySelector('.output1').textContent = false;
            }
  
            if ($('#non-empty').length) {
                document.querySelector('.output2').textContent = true;
            }
            else {
                document.querySelector('.output2').textContent = false;
            }
        };
    

  
                    

输出：

• 点击按钮前：
  
• 点击按钮后：
  

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。