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

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

　　<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. ArcGIS API for Silverlight 调用GP服务加载等值线图层

    原文:ArcGIS API for Silverlight 调用GP服务加载等值线图层 第二篇.Silverlight客户端调用GP服务 利用ArcGIS API for Silverlight实现G ...

  2. asp:gridview 中显示日期格式

    boundfield中应该这样设置: <asp:BoundField HeaderText="发表时间" DataField="PostTime" Htm ...

  3. PMP--论文部分

    个人观点,是三个部分最简单,最容易复习的,当然,如果你没有做好一个项目的摘要和正文的背诵,连各个过程的工具输输入输出的都记不住几个,就不用往下看了,以上内容的观点,至少保证真题做三次以上,书籍教材看三 ...

  4. JS-002-修改元素属性（以按钮示例）

    此文以修改 button 元素属性(例如:添加属性.修改属性.修改颜色样式.边框样式等)为简单示例,演示 js 修改 HTML 元素属性的基本方法,敬请参阅.若有不足之处敬请指正,不胜感激! 多不闲述 ...

  5. 如何将数据库中的表导成XML文件

    1.现将数据库中的信息读到DataTable中 2.用函数将DataTable转为string private string ConvertDataTableToXML(DataTable dt) { ...

  6. MVC强类型和弱类型的区别

    1 强类型的处理 首先必须要有一个对象的实体类,UserINfo就是一个实体类,如下: public class UserInfo() { public  int Id{set;get;} publi ...

  7. 九个uname命令获取Linux系统详情的实例

    当你在控制台模式下,无法通过“鼠标右键 > 关于”获取操作系统的信息.这时,在Linux下,你可以使用uname命令,帮助你完成这些工作. Uname是unix name的缩写.在控制台中实际使 ...

  8. Spring Boot 3 Hibernate

    JdbcTemplate Spring对数据库的操作在jdbc上面做了深层次的封装,使用spring的注入功能,可以把DataSource注册到JdbcTemplate之中. JdbcTemplate ...

  9. 学习RFS，所有文章的参考

    所有文章的主要参考: CSDN博客:http://blog.csdn.net/tulituqi 微博:@齐涛-道长

  10. category分类

    /* 使用继承关系来扩充一个类,有一个弊病,高耦合性 category(分类,类别) 能够帮我们扩充一个类的功能 */ - (void)superJump { //    [self eat]; [s ...