Dado un documento HTML, seleccione un elemento del documento HTML y verifique que el elemento esté vacío o no. Hay dos métodos utilizados para resolver este problema que se discuten a continuación:
Método 1: Usando el selector “:empty”: El elemento a ser chequeado usando el método is(). El método is() se usa para verificar si uno de los elementos seleccionados coincide con el elemento selector. Este método se puede usar en este elemento para probar si está vacío usando el selector «: vacío». El selector “:empty” se utiliza para seleccionar todos los elementos que no tienen hijos. Devolverá verdadero si el elemento está vacío, de lo contrario, devolverá falso.
Sintaxis:
$('#elementSelector').is(':empty')
Ejemplo:
<!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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: Usar la propiedad de longitud: La propiedad de longitud se usa en este elemento para determinar su longitud. Encuentra el número de objeto en un elemento jQuery. Una longitud de 0 significa que el elemento no tiene otros elementos. Cualquier valor distinto de 0 significa que algún elemento está presente. Esto se puede utilizar para comprobar si un elemento está vacío o no.
Sintaxis:
$('#elementSelector').length
Ejemplo:
<!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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA