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


Posted in jQuery onJune 04, 2018

本文实例讲述了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>3water.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.3water.com/code/HtmlJsRun测试运行结果如下:

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

希望本文所述对大家jquery程序设计有所帮助。

jQuery 相关文章推荐
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 #jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 #jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 #jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 #jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 #jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 #jQuery
关于jquery中attr()和prop()方法的区别
May 28 #jQuery
You might like
PHP中动态HTML的输出技术
2006/10/09 PHP
php后门URL的防范
2013/11/12 PHP
PHP URL路由类实例
2013/11/12 PHP
nginx下安装php7+php5
2016/07/31 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
Python中字典和集合学习小结
2017/07/07 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
办公室主任岗位职责
2013/11/08 职场文书
新学期感想
2015/08/10 职场文书
大学生党课心得体会
2016/01/07 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
初中语文教学反思范文
2016/03/03 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis