Méthode simple pour obtenir l'indice de l'élément avec jQuery

Ce texte illustre une méthode utilisant jQuery pour obtenir l'index d'un élément. Partageons cette information pour votre référence, voici les détails :

<!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>Cliquez sur le bouton correspondant pour afficher la boîte de couleur correspondante</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">Le premier boîte</div>
    <div class="box1">Le deuxième boîte</div>
    <div class="box2">Le troisième boîte</div>
    <div class="box3">Le quatrième boîte</div>
    <div class="box4">Le cinquième boîte</div>
  </div>
</body>
</html>

L'image de rendu est la suivante :

Pour ceux qui sont intéressés par plus de contenu sur jQuery, vous pouvez consulter les sujets spéciaux de ce site : 'Résultat de la collecte des techniques d'opérations des éléments de page jQuery', 'Résultat de la collecte des techniques d'extension jQuery', 'Résultat de la collecte des plugins et de leurs utilisations courantes jQuery', 'Résultat de la collecte des effets de glisser-déposer et des techniques jQuery', 'Résultat de la collecte des techniques d'opérations des tableaux (table) jQuery', 'Résultat de la collecte des utilisations d'Ajax dans jQuery', 'Résultat de la collecte des effets classiques courants jQuery', 'Résultat de la collecte des utilisations des animations et des effets jQuery' et 'Résultat de la collecte des utilisations des sélecteurs jQuery'.

J'espère que ce tutoriel vous aidera dans la conception de programmes jQuery.

Déclaration : le contenu de cet article est issu du réseau, propriété de ses auteurs respectifs, contribué et téléversé par les utilisateurs d'Internet de manière spontanée. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois confirmée, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)

Tutoriel de base