jQuery Method to Get Element Index Value index

This article illustrates the method of obtaining the index value of an element using jQuery. Shared for everyone's reference, as follows:

<!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>Click the corresponding button to display the corresponding colored box</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 content related to jQuery can check the special topics on this site: 'Summary of jQuery Page Element Operation Skills', 'Summary of jQuery Extension Skills', 'Summary of Common jQuery 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 described in this article will be helpful to everyone in the design of jQuery programs.

Statement: The content of this article is from the Internet, 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 any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please report any infringement by sending an email to codebox.com (replace # with @ in the email address), and provide relevant evidence. Once verified, this site will immediately delete the infringing content.

Basic Tutorial