Vamos a ver como seleccionar un elemento concreto con JQUERY, un elemento que no sea el primero o el último por ejemplo el cuarto y en nuestro caso le daremos estilo cuando suceda algo en nuestra web (cuando se haga clic en un texto h1).
Mediante el selector :qr(x) podemos indicarle a JQUERY el número del elemento que queremos seleccionar.
Ejemplos, selector :eq
<!DOCTYPE html> <html> <head> <title>Selector un elemento concreto</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(){ $('ul li:eq(6)').css({"border":"1px solid red"}); }); $('h2').click(function(){ $('ul li:eq(3)').css({"border":"1px solid red"}); }); }); </script> <style> *{ width: 100%; margin: 0 auto; } </style> </head> <body> <h1 id='miId'>Seleccionar el elemnto de la lista número = 6</h1> <ul> <li> Lista 1 </li> <li> Lista 2 </li> <li> Lista 3 </li> <li> Lista 4 </li> <li> Lista 5 </li> </ul> <h2>Seleccionar el elemnto de la lista número = 3</h1> <ul> <li> Lista 1 </li> <li> Lista 2 </li> <li> Lista 3 </li> <li> Lista 4 </li> <li> Lista 5 </li> </ul> </body> </html>
Nuevamente el código necesario no es más que una línea, el resto es código HTML y CSS.
Hay que tener en cuenta que la numeración empieza por 0, es decir el primer valor li es 0, el segundo 1, etc.
//pinta el 4º li $('ul li:eq(3)').css({"border":"1px solid red"});
Como puedes comprobar en el ejemplo de abajo, la numeración es sobre el total de elementos, si queremos que sea de forma exclusiva podemos crearle un estilo único o podemos crear un filtro con hijos y padres.
Lo siento, debes estar conectado para publicar un comentario.