jQuery实现的简单获取索引功能示例
更新时间：2018年06月04日 12:04:54 作者：前端爱我
这篇文章主要介绍了jQuery实现的简单获取索引功能,涉及jQuery事件响应及元素索引获取相关操作技巧,需要的朋友可以参考下
本文实例讲述了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.jb51.net 获取当前点击的元素在原来集合中的索引</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.jb51.net/code/HtmlJsRun测试运行结果如下：
更多关于jquery相关内容感兴趣的读者可查看本站专题：《jQuery操作DOM节点方法总结》、《jquery常用操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery操作json数据技巧汇总》、《jQuery操作xml技巧总结》及《jQuery扩展技巧总结》
希望本文所述对大家jquery程序设计有所帮助。
相关文章
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片，并且用户可以点击左右按钮来切换图片。2011-12-12
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
本篇文章是对在Jquery中把一段html代码动态写入到DIV中的实现方法进行了详细的分析介绍，需要的朋友可以参考下2013-07-07
这篇文章主要介绍了jquery中ajax函数执行顺序问题之如何设置同步,需要的朋友可以参考下2014-02-02
看了前面两讲的54淘客网友，我想应该对JQuery已经有了个初步的认识，知道如何用JQuery选择器来获取控件的值，今天我们主要讲使用JQuery对常用控件的取值。2010-07-07
这篇文章主要介绍了jquery实现翻动fadeIn显示的方法,实例分析了jQuery中fadeIn方法的使用技巧,需要的朋友可以参考下2015-03-03
经常会遇到这样的情况，当页面展示内容过长时，想点导航切换栏目，就得把滚动条拉回到顶上，这样操作总不太人性化，能不能让导航超出显示范围外时自动贴在屏幕最顶上呢？答案肯定是能的。如果不太明白，把滚动条拉到下面点，看下我博客是效果就明白了。2011-09-09
本文给大家分享一段jquery代码实现滑动按钮开关的效果，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的的朋友参考下2016-12-12
这篇文章主要给大家介绍了利用jquery如何禁止外层滚动条的滚动,文中给出了详细的示例代码，相信对大家的理解和学习具有一定的参考借鉴价值，有需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
这篇文章介绍了Jquery中给animation加更多的运作效果实例，有需要的朋友可以参考一下2013-09-09
这篇文章主要介绍了jquery实现适用于门户站的导航下拉菜单效果代码,可实现鼠标滑过菜单项实现下拉列表显示效果的功能,非常具有实用价值,需要的朋友可以参考下2015-08-08
最新评论