En este artículo, veremos cómo encontrar todos los elementos en la página que están vacíos usando jQuery.
Enfoque 1: el selector :empty se puede utilizar para obtener todos los elementos de la página que actualmente están vacíos. Estos elementos se iteran usando el método each() y se puede acceder a ellos usando la referencia this dentro del ciclo.
Se puede seleccionar un tipo particular de elemento especificando el tipo de elemento frente al selector deshabilitado; de lo contrario, se seleccionan todos los elementos en la página. Por ejemplo, podemos especificar que solo los elementos de entrada y área de texto deben verificarse si están vacíos.
Sintaxis:
$(".btn").on("click", function () {
// Select all the empty elements on
// the page and iterate through them
$(":empty").each(function () {
// Access the empty elements
});
});
El siguiente ejemplo ilustra el enfoque anterior:
Ejemplo:
HTML
<!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>
Producción:
Enfoque 2: todos los elementos de la página que deben verificarse se seleccionan primero mediante un selector jQuery. Podemos especificar solo elementos de entrada y área de texto que deben verificarse si están vacíos. Luego, estos elementos se repiten y el método is () se usa para verificar si el elemento actual coincide con un selector. El selector :empty se usa para verificar si está vacío o no, similar al primer enfoque.
Sintaxis:
$(".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
})
});
El siguiente ejemplo ilustra el enfoque anterior:
Ejemplo:
HTML
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA