javascript和jquery中获取列表的索引
网页中的图片预览一般都需要获取图片列表的索引，或则图片对应的标签的索引，以此达到点击相应的标签获取索引，显示相应的图片
列表有很多种表达的方式，一种是
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
<li>葡萄</li>
</ul>
这种情况下，如果使用jquery获取<li>的索引较为简单，因为，jQuery中含有index（）方法，具体实现如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../jquery.js"></script>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
<li>葡萄</li>
</ul>
<script type="text/javascript">
$(function(){
$('ul li').click(function(){
var i = $(this).index();
alert(i);
})
})
</script>
</body>
</html>
如果直接使用原生javascript的话，此时就要主意作用域的问题，可以利用闭包来解决
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
<li>葡萄</li>
</ul>
<script type="text/javascript">
function its(){
var uls = document.getElementsByTagName("ul");
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick = (function(num){
return function(){
alert(num);
}
})(i);
}
}
its(); </script>
</body>
</html>
如果列表的表达方式是：
<div id="fruit">
<a href="#">苹果</a>
<a href="#">香蕉</a>
<a href="#">西瓜</a>
<a href="#">葡萄</a>
</div>
在这种情况下，使用jquery解决的方式和javascript解决的方式同第一种原理是一样的。
欢迎指错和改进，谢谢！
javascript和jquery中获取列表的索引的更多相关文章
- python 中获取列表的索引
1.index方法 list_a= [12,213,22,2,32]for a in list_a: print(list_a.index(a)) 结果: 0 1 2 3 4 如果列表的没有重复的话那 ...
- Pyhton中获取列表的索引
index方法 list_a= [12,213,22,2,32] for a in list_a: print(list_a.index(a)) 结果: 0 1 2 3 4 如果列表的没有重复项的话那 ...
- 使用 JavaScript 在下拉列表中获取选定的值
使用 JavaScript 在下拉列表中获取选定的值 演示Demo 使用 JavaScript 在下拉列表中获取选定的值? <!DOCTYPE html> <html> < ...
- jquery中获取当前点击对象
jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);
- 获取列表的索引操作：enumerate
通过循环获取列表的索引操作: 主要使用:enumerate product_list = [['Iphone7',5800], ['Coffee',30], ['疙瘩汤',10], ['Python ...
- jQuery中获取a标签的值
如题,一组相同action的a标签,不同的是a标签的内容为搜索内容.点击页面显示不同的数据 刚开始试过在 a标签中添加 value值 和id 的值,结果在jQuery中获取值均失败! 后来发现,根本不 ...
- jquery中获取iframe的id的方法：
jquery中获取iframe的id的方法: var frameId = window.frameElement && window.frameElement.id || ''; al ...
- python3使用ConfigParser从配置文件中获取列表
使用python3使用ConfigParser从配置文件中获取列表 testConfig.py #!/usr/bin/env python # coding=utf- __author__ = 'St ...
- JavaScript及jQuery中的各种宽高属性图解
文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”. 作者声明:本 ...
随机推荐
- 【转】使用git、git-flow与gitlab工作
转自:http://www.tuicool.com/articles/BZJRj2 使用git.git-flow与gitlab工作 时间 2013-11-02 00:40:39 Axb的自我修养 原 ...
- iOS企业开发plist安装包实现
第一步: 在使用MACBOOK导出ipa的时候,我们得到ipa的同时,还得到一份plist文件 看到我们导出的plist,需要注意的地方有两个已经用中文标注. 一个是URL,一个是bundle-ide ...
- :first与:first-child的区别
说的简单,:first表示单个元素,:fisrt-child表示的多个元素(集合). 如果追求深一点的话, 1.$(:first).css()表示全局或局部全局的第一个,也就是表示单个元素 2.$(: ...
- Flask 与 Celery 在 windows 下的集成问题
Flask 与 Celery 在 windows 下的集成问题 所有的 Web 框架内部的视图中不适合执行需要长时间运行的任务,包括 Flask .Django 等.这类型的任务会阻塞 Web 的响应 ...
- CentOS 6.6 yum 搭建LAMP环境
CentOS 查看操作系统版本 [root@oa ~]# cat /etc/redhat-releaseCentOS release 6.6 (Final) 参考linux centos yum安装L ...
- [PCL]3 欧式距离分类EuclideanClusterExtraction
EuclideanClusterExtraction这个名字起的很奇怪,欧式距离聚类这个该如何理解?欧式距离只是一种距离测度的方法呀!有了一个Cluster在里面,我以为是某一种聚类算法,层次聚类?k ...
- python多进程（三种方法）
#!/usr/bin/env python # -*- coding:utf- -*- from multiprocessing import Pool import time def f(x): t ...
- PythonDay01
>注释 >>当行注视:# 被注释内容 >>多行注释:""" 被注释内容 """ >执行脚本传入参数 &g ...
- HTML页面刷新、跳转
HTML方式 1.页面刷新 <!-- 5秒之后,跳转到http://www.qunar.com页面 --> <meta http-equiv="refresh" ...
- iOS 上拉刷新和下拉加在更多(第三方框架EGOTableViewPullRefresh)
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...