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解决的方式同第一种原理是一样的。

　　欢迎指错和改进，谢谢！