正文
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解决的方式同第一种原理是一样的。
欢迎指错和改进，谢谢！
