Método simple para obtener el valor de índice del elemento utilizando jQuery

Este ejemplo ilustra cómo obtener el valor de índice del elemento con jQuery. Comparto con ustedes para que lo consideren, como se muestra a continuación:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery获取索引值</title>
<style type="text/css">
  *{margin:0; padding:0;}
  ul,li{list-style:none;}
  #wrap{width:980px; height:500px; overflow:hidden; margin:0 auto;}
  ul{width:200px; height:500px; float:left;}
  ul li{width:200px; height:100px; line-height:100px; text-align:center; font-size:16px; cursor:pointer;}
  #wrap div{width:700px; height:500px; float:right;}
  #btn0,.box0{background:#933;}
  #btn1,.box1{background:#09F;}
  #btn2,.box2{background:#93F;}
  #btn3,.box3{background:#F66;}
  #btn4,.box4{background:#3C0;}
  .box2,.box3,.box1,.box4{display:none;}
  #btn0.current,#btn1.current,#btn2.current,#btn3.current,#btn4.current{border:1px solid #000;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  $$(function(){
    $$("#btn li").click(function(){
      $$(this).addClass("current").siblings().removeClass("current");
      var n=$("#btn li").index(this);
      $(".box"+n).show().siblings("div").hide();
    }
  }
</script>
</head>
<body>
  <div id="wrap">
    <h2>Presione el botón correspondiente para mostrar la caja de color correspondiente</h2>
    <ul id="btn">
      <li id="btn0" class="current">0</li>
      <li id="btn1">1</li>
      <li id="btn2">2</li>
      <li id="btn3">3</li>
      <li id="btn4">4</li>
    </ul>
    <div class="box0">Caja primera</div>
    <div class="box1">Caja segunda</div>
    <div class="box2">Caja tercera</div>
    <div class="box3">Caja cuarta</div>
    <div class="box4">Caja quinta</div>
  </div>
</body>
</html>

La imagen de ejecución se muestra a continuación:

Los lectores interesados en más contenido relacionado con jQuery pueden ver la sección especial de este sitio: 'Resumen de Trucos de Operación de Elementos de Página jQuery', 'Resumen de Trucos de Extensión jQuery', 'Resumen de Usos de Plugins Comunes jQuery', 'Resumen de Efectos de Arrastrar y Soltar jQuery', 'Resumen de Trucos de Operación de Tabla (table) jQuery', 'Resumen de Usos de Ajax en jQuery', 'Resumen de Efectos Clásicos Comunes jQuery', 'Resumen de Usos de Animación y Efecto jQuery' y 'Resumen de Usos de Selectores jQuery'.

Espero que lo descrito en este artículo sea útil para el diseño de programas jQuery.

Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, se ha subido por usuarios de Internet de manera autónoma y el sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume responsabilidad alguna por las leyes relacionadas. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.)

Tutoriales básicos

Te gustará