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 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”. 作者声明:本 ...
随机推荐
- 【转】关于Android资源文件中出现百分号的问题
关于Android资源文件中出现百分号的问题 分类: Android JAVA2014-08-01 16:53 1345人阅读 评论(0) 收藏 举报 ANDROID格式化资源文件 目录(?)[+ ...
- JS实现动画原理一（闭包方式）
前提: 你必须了解js的闭包(否则你看不懂滴) 我们就来做一个js实现jq animate的动画效果来简单探索一下,js动画实现的简单原理: html代码 <div id=&q ...
- Linux就这个范儿 第18章 这里也是鼓乐笙箫 Linux读写内存数据的三种方式
Linux就这个范儿 第18章 这里也是鼓乐笙箫 Linux读写内存数据的三种方式 P703 Linux读写内存数据的三种方式 1.read ,write方式会在用户空间和内核空间不断拷贝数据, ...
- PDO防注入原理分析以及使用PDO的注意事项
我们都知道,只要合理正确使用PDO,可以基本上防止SQL注入的产生,本文主要回答以下两个问题: 为什么要使用PDO而不是mysql_connect? 为何PDO能防注入? 使用PDO防注入的时候应该特 ...
- android关于The connection to adb is down, and a severe error has occured.这个问题的解决办法
有时在打开模拟器的时候会出现The connection to adb is down, and a severe error has occured.这个问题,这个问题的解决办法有两个: 方法一:找 ...
- iOS UICollectionView之三（基本用法）
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...
- linux:网络yum源和制作本地光盘yum源
linux:存放yum源的位置:/etc/yum.repos.d/,该目录下全是一些yum源 一.网络yum源: 如图:下面全部都是yum源,后缀是".repo"都是合法的yum源 ...
- 基于DES算法加密的防撞库密码系统项目总结
项目内容:基于DES算法加密的防撞库密码系统 小组名:zqhzkzkj 目标:1.对用户输入的8位字符进行DES加密,要求用户输入8位密钥 2.对于不同的网站,不同的用户名生成不同的密码 小组成员:周 ...
- For嵌套输出图形
/*输出此图形 * * * * * * * * * ** * * * * * * * * * * * * * *解析:可以把此图形看成两部分----*---* *--* ...
- Codeforce Round #220 Div2
这场气场太大,居然一个题不会! 所以没交! 赛后发现 A:陷阱多- -!不要超过上下界,可以上去再下来! B:不会做! C:自己想太多- -!