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