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

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

　　<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. 阅读javaScript 的原型笔记

    下面我们先看一个例子已经一张图. function Foo() { } Object.prototype.name = 'My Object'; Foo.prototype.name = 'Bar'; ...

  2. Java学习-037-JavaWeb_006 -- JSP 动作标识 - include

    这个动作是指在当前的页面中包含一个或多个 JSP 页面或者 HTML 文件,语法:<jsp:include file="../jsp/login.jsp" flush=&qu ...

  3. 取消table中tr td的边距

    <table border="0" cellspacing="0" cellpadding="0">

  4. python 递归

    学习python,正好用一个例子练习一下递归. 参考文档: http://www.runoob.com/python/python-exercise-example18.html 题目:求s=a+aa ...

  5. 给Windows机器创建软连接

    给Windows机器创建软连接 http://blog.csdn.net/w6611415/article/details/32084677

  6. SqlServer基础：Bit类型

    SqlServer的bit类是只0或者1,默认不输入值时为null,但是如果输入的值不是0和1时,则默认填充的值为1

  7. Inside Flask - Flask 简介

    Inside Flask - Flask 简介 前言 Flask 的设计目标是实现一个 wsgi 的微框架,其核心代码保持简单和可扩展性,很容易学习.对于有一定经验初学者而言,跟着例子和一些书的代码来 ...

  8. android中用Spannable在TextView中设置超链接、颜色、字体

    昨晚研读 ApiDemo 源码至 com.example.android.apis.text.Link 类.首先,看一下其运行效果:  要给 TextView 加上效果,方式主要有几种: 第一种,自动 ...

  9. gradient color

    http://www.cnblogs.com/YouXianMing/p/3793913.html layer 不能自动autolay, 只能在viewDidLayout里面设置宽度 - (void) ...

  10. javascript中数组的concat()方法 - 数组连接

    <html> <head> <title>数组的concat()方法</title> <script> /* 数组的concat()方法: ...