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>
No hay comentarios:
Publicar un comentario