jQuery实现的简单获取索引功能示例

2019-11-19 13:43:32

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery实现的简单获取索引功能。分享给大家供大家参考，具体如下：

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>www.VeVB.COm 获取当前点击的元素在原来集合中的索引</title> <style type="text/css">  li {    height: 25px;    line-height: 25px;    background: rgba(0,0,0,0.5);    border-bottom: 1px solid red;  }  a {    text-decoration: none;    font-size: 16px;  } </style> </head> <body> <div>  <ul>    <li>      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >        <div class="index">        0        </div>      </a>    </li>    <li>      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >        <div class="index">        1        </div>      </a>    </li>    <li>      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >        <div class="index">        2        </div>      </a>    </li>    <li>      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >        <div class="index">        3        </div>      </a>    </li>    <li>      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >        <div class="index">        4        </div>      </a>    </li>  </ul> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript">    $(function(){      $(".index").on("click",function(){          var $target = $(this);          console.log($(".index").index($target));      });    }); </script> </body></html>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.VeVB.COm/code/HtmlJsRun测试运行结果如下：