Vamos a ver como seleccionar los elementos siguientes y anteriores con JQUERY, en este caso queremos seleccionar los elementos (todos) a partir del que le indicamos como indice y anteriores al indicado.
Mediante el selector :gt(x) podemos indicarle a JQUERY a partir de que elemento queremos que seleccione y con :lt(x) que seleccione los elementos anteriores al indicado.
Ejemplos, selectores :gt y lt
<!DOCTYPE html>
<html>
<head>
<title>Selector de los elementos siguientes y anteriores</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.uno li:gt(2)').css({"border":"1px solid red"});
});
$('h2').click(function(){
$('ul.dos li:lt(2)').css({"border":"1px solid red"});
});
});
</script>
<style>
*{
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 id='miId'>Seleccionar elementos siguientes de ESTA PRIMERA lista: a partir del 3</h1>
<ul class="uno">
<li>
Lista 1
</li>
<li>
Lista 2
</li>
<li>
Lista 3
</li>
<li>
Lista 4
</li>
<li>
Lista 5
</li>
</ul>
<h2>Seleccionar elementos anteriores de ESTA SEGUNDA lista: a partir del 3</h1>
<ul class="dos">
<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 los elementos siguientes al 2, es decir el 3,4,etc
$('ul.uno li:gt(2)').css({"border":"1px solid red"});
//pinta los elementos anteriores al 2, es decir el 0 y el 1
$('ul.dos li:lt(2)').css({"border":"1px solid red"});
En este ejemplo hemos marcado los 2 listados como uno y dos para que sean independientes si no, las 2 listas serían como una sola.
Deja una respuesta