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