jQuery: Einfaches Verfahren zur Erzeugung von Elementindizes index

Dieser Artikel beschreibt, wie man mit jQuery den Indexwert eines Elements erhält. Hier wird es geteilt, um zur Referenz anderer zu dienen, wie folgt:

<!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(){
      $.addClass("current").siblings().removeClass("current");
      var n=$("#btn li").index(this);
      $(".box"+n).show().siblings("div").hide();
    }
  }
</script>
</head>
<body>
  <div id="wrap">
    <h2>Klicken Sie auf die entsprechenden Schaltflächen, um die Kisten in entsprechenden Farben anzuzeigen</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">Erster Kasten</div>
    <div class="box1">Zweiter Kasten</div>
    <div class="box2">Dritter Kasten</div>
    <div class="box3">Vierter Kasten</div>
    <div class="box4">Fünfter Kasten</div>
  </div>
</body>
</html>

Das Laufbild zeigt wie folgt:

Interessierte Leser, die mehr über jQuery erfahren möchten, können die Themen dieser Seite überprüfen: 'Übersicht über jQuery-Elementbetriebsmethoden', 'Übersicht über jQuery-Erweiterungstechniken', 'Übersicht über häufig verwendete jQuery-Plugins und deren Verwendung', 'Übersicht über jQuery-Schiebereffekte und -Techniken', 'Übersicht über jQuery-Tabellenoperationen', 'Übersicht über die Verwendung von Ajax in jQuery', 'Übersicht über häufige jQuery-Effekte', 'Übersicht über die Verwendung von Animationen und Effekten in jQuery' und 'Übersicht über die Verwendung von Selectoren in jQuery'.

Es hofft, dass die in diesem Artikel beschriebenen Inhalte allen bei der jQuery-Programmierung helfen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie urheberrechtlich geschützte Inhalte entdecken, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @, wenn Sie eine Meldung senden, und fügen Sie relevante Beweise bei. Bei nachgewiesener Urheberrechtsverletzung wird diese Seite sofort das betreffende urheberrechtlich geschützte Material löschen.)

Grundlagen-Tutorial

Empfohlene Artikel