Selector JQUERY de un texto :contains

Home » Blog » Selector JQUERY de un texto :contains

Aparte de poder acceder al DOM mediante las etiquetas HTML: ul, p, section, etc. Podemos acceder en función de una serie de filtros, por ejemplo un texto dado.

Vamos a ver como podemos acceder a los elementos en función de un texto usando :contains, acceder a elementos sin texto con :empty, elementos que son padres :parent o acceder a los elementos que tienen un elemento concreto :has(X).

Selectores :contains, :empty, :parent y :has(X)

<!DOCTYPE html>
<html>
<head>
<title>Selectores de texto, 1 elemento concreto, elementos vacios y los que sean padres</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#miId').click(function(){ 
$('li:contains("Lista 1")').css({"border":"1px solid red"});
}); 
$('h2').click(function(){ 
$('div:empty').css({"border":"1px solid red"});
});
$('h3').click(function(){ 
$('a:parent').css({"border":"1px solid red"});
}); 
$('h4').click(function(){ 
$('li:has(a)').css({"border":"1px solid red"});
}); 
});
</script>
<style>
*{
width: 100%;
margin: 0 auto; 
} 
</style>
</head>
<body>
<h1 id='miId'>Selector del texto Lista 1</h1> 
<ul>
<li class="pr">
Lista 1
</li>
<li>
Lista 2
</li>
<li class="pr">
Lista 3
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul> 
<h2>Selector de elemento vacio (Justo debajo de este texto)</h2>
<div></div>
<ul>
<li>
2 Lista 1
</li>
<li class="pr">
Lista 2
</li>
<li class="pr2"> 
<a href=''>Esto es un enlace con elemento</strong> hijo strong</a>
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul> 
<h3>Selector de los elementos padres (es decir que tienen elementos hijos), abajo hay un enlace vacio, por tanto sin hijos</h3>
<ul>
<li>
Lista 1 2
</li> 
<li>
<a href=""></a>
Lista 2
</li> 
</ul>
<h4>Selector de los elementos li que tienen a, hay 2</h4>
</body>
</html>

En este ejemplo podemos ver como acceder de diferentes formas a los elementos de DOM usando muy poco código javascript.

$('li:contains("Lista 1")').css({"border":"1px solid red"});

Buscamos todos los li que tengan el texto LISTA 1, da igual si esta al principio, al final o en medio del texto.

$('div:empty').css({"border":"1px solid red"});

En este caso buscamos los divs que estén vacíos, no vale si tienen espacios en blanco, como: &nbsp;

$('a:parent').css({"border":"1px solid red"});

Ahora lo que buscamos son los enlaces que tengan elementos HTML o texto.

$('li:has(a)').css({"border":"1px solid red"});

Y en este último caso, seleccionamos los li que contengan el elemento a.

Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas

Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.

erlantz rique
erlantz rique
19/02/2024

Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.

Jose Marlasca
Jose Marlasca
06/02/2024

Dió en la clave y nos dió los instrumentos que necesitábamos en esos momentos, y sobre todo entendió a la perfección lo que buscábamos. Lo mejor de web que hemos tenido en 24 años. Eskerrik asko Mezo!!

Troka Abentura
Troka Abentura
07/01/2024

Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.

Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024

Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%

Asier Hermoso
Asier Hermoso
03/01/2024

Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita 😉
Un crack!!

itxaso zubia
itxaso zubia
15/12/2023

El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.

Fernando Cózar
Fernando Cózar
02/11/2023