jQuery实现的简单获取索引功能示例
程序员文章站
2022-05-27 08:11:44
本文实例讲述了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程序设计有所帮助。
上一篇： 我喜欢的女孩在别人怀里
下一篇： 男人最变垃圾的地方