本文实例讲述了jQuery中index()方法用法。分享给大家供大家参考。具体分析如下：

此方法可以搜索匹配元素，并返回元素的索引值。
索引值是从0开始的。

语法结构一:

当此方法没有参数的时候，返回值是指定元素在其同辈元素集合中的索引位置。

复制代码代码如下:
$(selector).index()

实例代码:

实例一:

复制代码代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>index()函数-脚本之家</title>
<style type="text/css">
span{
  color:red;
}
</style>
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").click(function(){
    $("span").text($(".qian").index());
  })
});
</script>
</head>
<body>
<div>
  <ul>
    <li>后台专区</li>
    <li class="qian">前台专区</li>
    <li>数据库专区</li>
    <li>站长交流</li>
  </ul>
</div>
<div>当前li元素的位置:<span>0</span></div>
<button id="btn">点击查看结果</button>
</body>
</html>

上面代码能够返回类名为qian的li元素在其同辈元素集合中的索引值，看到这里大家可能有这样的疑问，所谓同辈元素是否是同类元素，也就是说li元素在li元素集合中的索引值。

实例二:

复制代码代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>index()函数-脚本之家</title>
<style type="text/css">
span{
  color:red;
}
</style>
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").click(function(){
    $(".index").text($("#sou").index());
  })
});
</script>
</head>
<body>
<div>
  <ul>
    <li>后台专区</li>
    <li id="qian">前台专区</li>
    <li>数据库专区</li>
    <li>站长交流</li>
    <span id="sou">搜索优化</span>
  </ul>
</div>
<div>当前li元素的位置:<span class="index">0</span></div>
<button id="btn">点击查看结果</button>
</body>
</html>

由以上的代码可以看出，并非只是同类元素，而是所有的同辈元素。

语法结构二:

当方法的参数为DOM对象或者jQuery对象时，返回值是此DOM对象或者jQuery对象在指定的元素集合中索引。
如果在指定的元素集合中找不到指定的DOM对象或者jQuery对象，那么返回值为-1。

复制代码代码如下:
$(selector).index(element)

参数列表:

参数 描述
element 获得index位置的DOM对象或者jQuery对象。

实例代码:

实例一:

复制代码代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>index()函数-脚本之家</title>
<style type="text/css">
span{
  color:red;
}
</style>
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").click(function(){
    $("span").text($("li").index(document.getElementById("qian")));
  })
})
</script>
</head>
<body>
<div>
  <ul>
    <li>后台专区</li>
    <li id="qian">前台专区</li>
    <li>数据库专区</li>
    <li>站长交流</li>
  </ul>
</div>
<div>当前li元素的位置:<span>0</span></div>
<button id="btn">点击查看结果</button>
</body>
</html>

实例二:

因为找不到匹配的元素，所以返回值是-1.

复制代码代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>index()函数-脚本之家</title>
<style type="text/css">
span{
  color:red;
}
</style>
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").click(function(){
    $(".index").text($("li").index(document.getElementById("sou")));
  })
});
</script>
</head>
<body>
<div>
  <ul>
    <li>后台专区</li>
    <li id="qian">前台专区</li>
    <li>数据库专区</li>
    <li>站长交流</li>
    <span id="sou">搜索优化</span>
  </ul>
</div>
<div>当前li元素的位置:<span class="index">0</span></div>
<button id="btn">点击查看实例</button>
</body>
</html>

语法结构三:

当方法的参数为选择器时，将会从通过此选择器获得的对象集合中查找元素。

复制代码代码如下:
$(selector).index(Jqselector)

参数列表:

参数 描述
Jqselector 选择器，将会从通过此选择器获得的对象中查找元素。

实例代码:

复制代码代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>index()函数-脚本之家</title>
<style type="text/css">
span{
  color:red;
}
</style>
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").click(function(){
    $(".index").text($("#qian").index("li"));
  })
});
</script>
</head>
<body>
<div>
  <ul>
    <li>后台专区</li>
    <li id="qian">前台专区</li>
    <li>数据库专区</li>
    <li>站长交流</li>
    <span id="sou">搜索优化</span>
  </ul>
</div>
<div>当前li元素的位置:<span class="index">0</span></div>
<button id="btn">点击查看实例</button>
</body>
</html>

上述代码会取得id值为qian的li元素在通过li选择器获得li对象集合中的索引位置。

希望本文所述对大家的jQuery程序设计有所帮助。

jQuery中index()方法用法实例的更多相关文章

  1. jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...

  2. jQuery中on()方法用法实例

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...

  3. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  4. jQuery中attr()方法用法实例

    本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...

  5. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  6. jQuery中data()方法用法实例

    语法结构一: 复制代码代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码代 ...

  7. 解析jQuery中extend方法--用法《一》

    extend方法在jQuery中是一个很重要的方法,jQuey内部用它来扩展属性方法.常用语jQuery插件开发. jQuery提供了两个方法,$.extend和$.fn.extend,两个方法内部实 ...

  8. jQuery中 index() 方法的使用

    假设一个集合中有10个元素,源生js在添加事件的时候,会使用for循环,里面的i的值,就是当前点击元素是集合中的第i个元素.在jquery中,获得i的值的方法如下: <ul id="a ...

  9. 解析jQuery中extend方法--源码解析以及递归的过程《二》

    源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...

随机推荐

  1. Jedis操作Redis--SortedSet类型 (会自然排序)

    /** * SortedSet(有序集合) * ZADD,ZCARD,ZCOUNT,ZINCRBY,ZRANGE,ZRANGEBYSCORE,ZRANK,ZREM,ZREMRANGEBYRANK,ZR ...

  2. msyql int(x) 中的x

    先看一个mysql表结构 Sql代码 CREATE   TABLE  `test` ( `TYPEID` int (2) ) ENGINE=MyISAM CHARSET=latin1; Sql代码   ...

  3. UVM系统验证基础知识0(Questasim搭建第一个UVM环境)

    版权声明:本文为Times_poem原创文章,转载请告知原博主.特别声明:本文在原文基础上做了简单修改以适应文中举例在questasim下的运行,敬请原博主谅解. 需求说明:UVM系统验证 内容   ...

  4. c++类型形参的实参的受限转换

    缘起:<c++ primer> 4th, 528页,习题16.3 源程序 #include <iostream> #include <vector> #includ ...

  5. Java将Excel的列数以字母表示的字符串转换成数字表示

    我们知道,在 Excel 中,行数用数字表示,而列数是用字母表示的(如下图所示),有时候需要把它转换成数字来使用,或者把数字转换成字母.(例如使用POI操作Excel) 下面是转换代码,用来进行字母和 ...

  6. Sumblime Text 2/3 插件安装方法

    使用Package Control组件安装 按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音): 如果是sublime ...

  7. 举一反三 willDisplayCell在UICollectionView中的一些应用

    一.UICollectionViewCell动画 上一篇博客写仿58同城实现UITableViewCell动画,同样UiCollectionView中也能用,上一个是从右到左的动画还比较好弄, 但如果 ...

  8. 使用PowerShell为SSAS Role添加Membership

    PowerShell, SSAS, Role, Membership 上篇随笔使用PowerShell创建SSAS Role贴出了如何使用PowerShell批量创建Role,由于个人项目需求,创建R ...

  9. 获取用户Ip地址通用方法

    1 public static function getIp() 2 { 3 if ($HTTP_SERVER_VARS["HTTP_X_FORWARDED_FOR"]) 4 { ...

  10. 【8】memcached实例

    一.memcached环境搭建 1.下载后解压到D:\memcached(下载地址:memcached-win64下载地址) 2.安装到windows服务,打开cmd命令行,进入memcached目录 ...