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实现图片轮播效果
May 08 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
range 标准化之获取
2011/08/28 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
Python跳出循环语句continue与break的区别
2014/08/25 Python
Python continue继续循环用法总结
2018/06/10 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
大学生入党推荐书范文
2014/05/17 职场文书
保险公司开门红口号
2014/06/21 职场文书
淘宝活动总结范文
2014/06/26 职场文书
2016新年感言
2015/08/03 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android