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:
$('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.
Deja una respuesta