Método 1: usar el método each() en la lista para verificar la propiedad innerText
Cada uno de los elementos de la lista de la lista desordenada se selecciona primero mediante un selector jQuery. El método each() se usa en esta lista para iterar a través de ella. Este método tiene una función de devolución de llamada que devuelve el índice actual y el elemento de la iteración.
El texto dentro del elemento devuelto se comprueba en busca de la propiedad innerText para ver si coincide con el texto requerido. Una coincidencia exitosa significa que el texto dentro de la lista desordenada seleccionada tiene el texto requerido.
Sintaxis:
let found = false;
$("#list li").each((id, elem) => {
if (elem.innerText == requiredText) {
found = true;
}
});
return found;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Check if ul has li with a specific text in jQuery.
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to check if ul has li with
a specific text in jQuery?
</b>
<ul id="list">
<li>GeeksforGeeks</li>
<li>Computer</li>
<li>Science</li>
<li>Portal</li>
</ul>
<p>
The li elements contain the text "Computer":
<span class="output">
</span>
</p>
<p>
The li elements contain the text "Python":
<span class="output2">
</span>
</p>
<button onclick="runChecks()">
Check for the text
</button>
<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script>
function checkforText(requiredText) {
let found = false;
$("#list li").each((id, elem) => {
if (elem.innerText == requiredText) {
found = true;
}
});
return found;
}
function runChecks() {
ans1 = checkforText('Computer');
document.querySelector(".output").textContent = ans1;
ans2 = checkforText('Python');
document.querySelector(".output2").textContent = ans2;
}
</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 el selector contains()
El selector contains() se usa para seleccionar elementos cuyo texto coincide con el dado. Este texto podría estar presente en cualquiera de los descendientes del elemento o en el propio elemento. Se necesita un parámetro que es el texto que distingue entre mayúsculas y minúsculas para que coincida.
El selector contains() se utiliza junto con el selector utilizado para seleccionar los elementos de la lista. Si no se selecciona ningún elemento, es decir, si el texto dado no está presente, la cantidad de elementos devueltos sería 0. La cantidad de elementos devueltos podría verificarse con la propiedad de longitud y usarse para verificar si la lista contiene el texto especificado.
Sintaxis:
let found = false;
selector = `#list :contains('${requiredText}')`
selectedList = $(selector);
if (selectedList.length) {
found = true;
}
return found;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Check if ul has li with a specific text in jQuery.
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to check if ul has li with
a specific text in jQuery?
</b>
<ul id="list">
<li>GeeksforGeeks</li>
<li>Computer</li>
<li>Science</li>
<li>Portal</li>
</ul>
<p>
The li elements contain the text "Computer":
<span class="output">
</span>
</p>
<p>
The li elements contain the text "Python":
<span class="output2">
</span>
</p>
<button onclick="runChecks()">
Check for the text
</button>
<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script>
function checkforText(requiredText) {
let found = false;
selector
= `#list :contains('${requiredText}')`
selectedList = $(selector);
if (selectedList.length) {
found = true;
}
return found;
}
function runChecks() {
ans1 = checkforText('Computer');
document.querySelector(".output").textContent = ans1;
ans2 = checkforText('Python');
document.querySelector(".output2").textContent = ans2;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botó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