网页中的图片预览一般都需要获取图片列表的索引，或则图片对应的标签的索引，以此达到点击相应的标签获取索引，显示相应的图片

　　列表有很多种表达的方式，一种是

　　<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中获取列表的索引的更多相关文章

  1. 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 如果列表的没有重复的话那 ...

  2. Pyhton中获取列表的索引

    index方法 list_a= [12,213,22,2,32] for a in list_a: print(list_a.index(a)) 结果: 0 1 2 3 4 如果列表的没有重复项的话那 ...

  3. 使用 JavaScript 在下拉列表中获取选定的值

    使用 JavaScript 在下拉列表中获取选定的值 演示Demo 使用 JavaScript 在下拉列表中获取选定的值? <!DOCTYPE html> <html> < ...

  4. jquery中获取当前点击对象

    jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);

  5. 获取列表的索引操作：enumerate

    通过循环获取列表的索引操作: 主要使用:enumerate product_list = [['Iphone7',5800], ['Coffee',30], ['疙瘩汤',10], ['Python ...

  6. jQuery中获取a标签的值

    如题,一组相同action的a标签,不同的是a标签的内容为搜索内容.点击页面显示不同的数据 刚开始试过在 a标签中添加 value值 和id 的值,结果在jQuery中获取值均失败! 后来发现,根本不 ...

  7. jquery中获取iframe的id的方法：

    jquery中获取iframe的id的方法: var frameId = window.frameElement && window.frameElement.id || ''; al ...

  8. python3使用ConfigParser从配置文件中获取列表

    使用python3使用ConfigParser从配置文件中获取列表 testConfig.py #!/usr/bin/env python # coding=utf- __author__ = 'St ...

  9. JavaScript及jQuery中的各种宽高属性图解

    文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”.   作者声明:本 ...

随机推荐

  1. java用spring实现文件下载

    今天是我第一博客文章,希望写出来的东西能让大家看明白,欢迎大家给我留言. html页面: <a href="#" onclick="downLoad()" ...

  2. magento去掉小数点后面的0

     <?php echo $_product->getPrice()?> PHP number_format() 函数  <?php echo number_format($_p ...

  3. BetterZip，支持rar等多种压缩解压方式（Xcode自身不能解压rar）

    百度云盘下载链接: http://pan.baidu.com/s/1sk7Faw9密码: muw7 rarosx-5.3.0.tar.gz1.解压之后放到/usr/local/目录下(位置可选,不过要 ...

  4. animate实现动画效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. sql server 2008查询窗口怎么显示行数

    工具->选项

  6. windows10 环境下theano安装

    前言:我用的是 Anaconda2 安装python 1. 在Anaconda prompt中输入 conda install mingw libpython 2. 添加环境变量 C:\Anacond ...

  7. Definition Questions

    What is the relationship and differences between processes and threads? A process usually represent ...

  8. LeetCode Find Minimum in Rotated Sorted Array II

    原题链接在这里:https://leetcode.com/problems/find-minimum-in-rotated-sorted-array-ii/ 题目: Follow up for &qu ...

  9. box_shadow

    .tip{width:485px; height:260px; position:absolute;top:10%; left:30%;background:#fcfdfd; box-shadow:1 ...

  10. 弹窗插件layer

    layer的插件的地址:http://layer.layui.com/简单使用: layer.open({ type: , //page层 area: ['500px', '300px'], titl ...