如何用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>
输出:
- 在点击按钮之前。
- 点击该按钮后。
方法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是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例,从基础开始学习jQuery。