Desde la versión de JQUERY 1.9 surgieron nuevos selectores para facilitar el acceso a los elementos del DOM. Si queremos seleccionar el X elemento hijo de un padre que tenga un atributo concreto, podemos usar el atributo :nth-of-type. La otra versión es a la inversa que empiece a contar desde abajo :nth-last-of-type.
Por ejemplo: queremos mostrar solo los elementos li en 4ª posición del elemento padre ul pero siempre que el 4º elemento tenga un id=XXXX.
Ejemplos, selectores :nth-of-type y :nth-last-of-type
<!DOCTYPE html>
<html>
<head>
<title>Selector de elementos en función de su tipo</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.pr:nth-of-type(2)').css({"border":"1px solid red"});
});
$('h2').click(function(){
$('li:nth-last-of-type(2)').css({"border":"1px solid red"});
});
});
</script>
<style>
*{
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 id='miId'>Selector de elementos en función de su tipo (li.pr)</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 elementos en función de su tipo (li)</h2>
<ul>
<li>
Lista 1
</li>
<li class="pr">
Lista 2
</li>
<li>
Lista 3
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul>
</body>
</html>
En este caso el código sigue siendo muy sencillo, lo que cuesta es entender el funcionamiento:
//desde arriba, busca los li.pr en la segunda posición respecto al ul
$('li.pr:nth-of-type(2)').css({"border":"1px solid red"});
//desde abajo busca todos los li en la posición 2
$('li:nth-last-of-type(2)').css({"border":"1px solid red"});
En el primer ejemplo, buscamos todos los li con clase=pr que estén en la posición 2 del padre ul. En el ejemplo, al clicar sobre el primer texto vemos como se selecciona un li del segundo ul, por que en el primero no tienen la clase=pr. En el segundo, buscamos de abajo arriba todos los li en posición 2.
En este caso se comienza a contar considerando al primer elemento como 1.
Deja una respuesta