如何用jQuery检查一个HTML元素是否为空

如何用jQuery检查一个HTML元素是否为空

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

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

语法:

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

示例:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to check an HTML element
        is empty using jQuery ?
    </title>
      
    <script src=
        "https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
          
    <style>
        #empty {
            background-color: green;
            height: 50px;
            border: solid;
        } 
  
        #not-empty {
            background-color: lightgreen;
            height: 50px;
            border: solid;
            text-align: center;
        } 
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
      
    <b>
        How to check if an HTML element
        is empty using jQuery?
    </b>
      
    <p>
        Click on the button to check if
        the paragraph elements are empty.
    </p>
      
    <p>The div below is empty.</p>
    <div id="empty"></div>
  
    <p>The div below is not empty.</p>
    <div id="not-empty">This element has something!</div>
  
    <p>
        First div is empty: 
        <span class="output1"></span>
    </p>
      
    <p>
        Second div element is empty: 
        <span class="output2"></span>
    </p>
  
    <button onclick="checkifEmpty()">
        Check if empty
    </button>
  
    <script>
        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;
            }
              
        };
    </script>
</body>
  
</html>                    

输出:

  • 在点击按钮之前。
    如何用jQuery检查一个HTML元素是否为空?
  • 点击该按钮后。
    如何用jQuery检查一个HTML元素是否为空?

方法2:使用长度属性:长度属性用于这个元素,以确定其长度。它可以找到一个jQuery元素中的对象的数量。长度为0意味着该元素中没有其他元素。除了0以外的任何值意味着有一些元素存在。这可以用来检查一个元素是否是空的。

语法:

$('#elementSelector').length

示例:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to check if an HTML element
        is empty using jQuery?
    </title>
      
    <script src=
        "https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
      
    <style>
        #empty {
            background-color: green;
            height: 50px;
            border: solid;
        } 
  
        #not-empty {
            background-color: lightgreen;
            height: 50px;
            border: solid;
            text-align: center;
        } 
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
      
    <b>
        How to check if an HTML element
        is empty using jQuery?
    </b>
      
    <p>
        Click on the button to check if 
        the paragraph elements are empty.
    </p>
      
    <p>The div below is empty.</p>
    <div id="empty"></div>
  
    <p>The div below is not empty.</p>
    <div id="not-empty">
        This element has something!
    </div>
  
    <p>
        First div is empty: 
        <span class="output1"></span>
    </p>
    <p>
        Second div element is empty: 
        <span class="output2"></span>
    </p>
  
    <button onclick="checkifEmpty()">
        Check if empty
    </button>
      
  
    <script>
        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;
            }
        };
    </script>
</body>
  
</html>                    

输出:

  • 在点击按钮之前。
    如何用jQuery检查一个HTML元素是否为空?
  • 点击该按钮后。
    如何用jQuery检查一个HTML元素是否为空?

jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例,从基础开始学习jQuery。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程