极客教程如何在jQuery中找到所有为空的元素
在这篇文章中，我们将看到如何使用jQuery找到页面上所有为空的元素。
方法1： :empty选择器可用于获取页面中所有当前为空的元素。这些元素使用each()方法进行迭代，可以使用循环中的this引用进行访问。
通过在禁用选择器前面指定元素的类型，可以选择一个特定类型的元素，否则页面上的所有元素都会被选中。例如，我们可以指定只有input和textarea元素是空的，才会被检查。
语法:
$(".btn").on("click", function () {
// Select all the empty elements on
// the page and iterate through them
$(":empty").each(function () {
// Access the empty elements
});
});
下面的例子说明了上述方法。
示例:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to finds all elements
that are empty?
</b>
<p>
Click on the button to find
all empty elements
</p>
<label for="name">Name</label>
<input type="text" name="name" id="name">
<br><br>
<label for="address">Address</label>
<textarea name="address">
Address Five
</textarea>
<br><br>
<button class="btn">
Find all empty elements
</button>
<br><br>
<b>Empty Elements</b>
<ul class="empty-elements"></ul>
<script>
(".btn").on("click", function () {
let empty_elems = [];
// Select all the empty elements on
// the page and iterate through them
(":empty").each(function (index) {
// Add a border to the empty elements
(this).css(
"border", "2px red dotted"
);
// Add the elements to the list
empty_elems += "<li>" +
((this).get(0).tagName) + "</li>";
});
$(".empty-elements").html(empty_elems);
});
</script>
</body>
</html>
输出:
方法2：页面上所有需要检查的元素首先用一个jQuery选择器来选择。我们可以只指定input和textarea元素，如果它们是空的就应该被检查。然后这些元素被循环，is()方法被用来检查当前元素是否符合选择器。:empty选择器用于检查是否为空，与第一种方法类似。
语法:
$(".btn").on("click", function () {
// Select all the elements that
// have to be checked and iterate
// through them
$("li, input, textarea").each(function () {
// Check if the element is empty
if ($(this).is(":empty"))
// Access the empty element
else
// Access the non-empty element
})
});
下面的例子说明了上述方法。
示例:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to finds all elements
that are empty?
</b>
<p>
Click on the button to find
all empty elements
</p>
<label for="name">Name</label>
<input type="text" name="name" id="name">
<br><br>
<label for="address">Address</label>
<textarea name="address">
Address One, Country
</textarea>
<br><br>
<label for="address">Comments</label>
<textarea name="address"></textarea>
<br><br>
<b>Your Order</b>
<ul>
<li></li>
<li>Item Two</li>
<li></li>
<li>Item Four</li>
</ul>
<button class="btn">
Find all empty elements
</button>
<script>
(".btn").on("click", function () {
// Select all the elements that
// have to be checked and iterate
// through them
("li, input, textarea").each(function () {
// Check if the element is empty
// and apply a style accordingly
if ((this).is(":empty"))
(this).css(
"border", "2px red dashed"
);
else
$(this).css(
"border", "2px green solid"
);
})
});
</script>
</body>
</html>
输出:
