jueves, 10 de septiembre de 2015

jQuery - selector eq() para acceder a elementos de un modo indexado


Hola, hoy veremos un simple ejemplo de uso del selector eq() en jQuery, este selector nos permitirá acceder a los elementos de un modo indexado, es muy útil por ejemplo para recorrer todos los elementos de una clase, o acceder individualmente a ellos, igualmente para acceder a los elementos de un determinado tag html.

El ejemplo consiste en que el usuario a través de un input number pueda seleccionar el index de un elemento li, el elemento li seleccionado recibirá una clase css que resaltará su estado como activo.

Selecciona el index:
  • li 0
  • li 1
  • li 2
  • li 3


Código fuente del ejemplo ...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>

<script>
 $(function(){
  $("#input-list").on("change", function(){
   //Eliminar la clase li-active para reiniciar la búsqueda
   $("#list li").removeClass("li-active");
   //Obtener el número index introducido por el usuario
   index = $(this).val();
   //Si el elemento existe
   if ($("#list li:eq("+index+")").length)
   {
    //Agregar la clase li-active al elemento
    $("#list li:eq("+index+")").addClass("li-active");
   }
  });
 
 });
</script>

<style>
 .li-active {
  color: yellow;
  font-weight: bold;
 }
</style>

</head>
<body>
<h3>jQuery - selector eq() para acceder a elementos de un modo indexado</h3>

Selecciona el index: <input type="number" id="input-list" min="0" max="3" value="0">

<ul id="list">
<li>li 0</li>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
</ul>
</body>
</html>