Metodo per ottenere l'indice dell'elemento con jQuery

Questa istanza descrive il metodo di jQuery per ottenere l'indice dell'elemento. Condiviso con tutti per riferimento, come segue:

!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>Clicca sul pulsante corrispondente per visualizzare la scatola di colore corrispondente</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">First Box</div>
    <div class="box1">Second Box</div>
    <div class="box2">Third Box</div>
    <div class="box3">Fourth Box</div>
    <div class="box4">Fifth Box</div>
  </div>
</body>
</html>

The running effect diagram is as follows:

Readers who are interested in more jQuery-related content can check the special topics on this site: 'Summary of jQuery Page Element Operation Skills', 'Summary of jQuery Extension Skills', 'Summary of jQuery Common Plugins and Usage', 'Summary of jQuery Drag and Drop Effects and Skills', 'Summary of jQuery Table (table) Operation Skills', 'Summary of Ajax Usage in jQuery', 'Summary of Common jQuery Classic Effects', 'Summary of jQuery Animation and Effect Usage', and 'Summary of jQuery Selector Usage'.

I hope the content of this article is helpful to everyone's jQuery programming design.

Declaration: The content of this article is from the network, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, has not been manually edited, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (when sending an email, please replace # with @) for reporting, and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.

Guida di base