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

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

　　<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. VLC说明

    一.简介 vlc的全名是Video Lan Client,是一个开源的.跨平台的视频播放器.VLC支持大量的音视频传输.封装和编码格式,完整的功能特性列表可以在这里获得http://www.video ...

  2. 使用git Rebase让历史变得清晰

    当多人协作开发一个分支时,历史记录通常如下方左图所示,比较凌乱.如果希望能像右图那样呈线性提交,就需要学习git rebase的用法. “Merge branch”提交的产生 我们的工作流程是:修改代 ...

  3. Sql Server中通配符

    Sql Server中通配符的使用 通配符_ "_"号表示任意单个字符,该符号只能匹配一个字符."_"可以放在查询条件的任意位置,且只能代表一个字符.一个汉字只 ...

  4. c#上传文件（二）使用文件流保存文件

    1.html代码: <asp:FileUpload runat="server" ID="UpLoadFile"/> <asp:Button ...

  5. MVC中”从客户端检测到有潜在危险的Request.Form值“的解决方法

    从客户端检测到有潜在危险的Request.Form值: 在webForm中,可以在aspx页面顶部 <%@ Page Language="C#" AutoEventWireu ...

  6. Eclipse代码风格

    1.代码对齐风格:project...properties...Java Code Style...Formatter...Brance

  7. Spring第十一篇——–Spring整合Hibernate之配置数据源

    DataSource(数据源)提供了一个标准化的取得数据库连接的方式,通过getConnection()方法即可取得数据库的连接,Spring也提供了数据库连接池(DataBase connectio ...

  8. Inside Kolla - 01 简介

    简介 在 opencloud 2015 的会议上初次了解到 kolla 项目后,开始去了解和学习 kolla 的源代码和相关的知识.经过一段时间的了解,觉得 kolla 确实是一个很好的项目,它使用预 ...

  9. axis2 WebService的发布与调用

    1:准备:    JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk6downloads-1902814.html    e ...

  10. RabbitMQ学习总结 第五篇：路由Routing

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...