本文实例讲述了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. hibernate_SessionFactory_getCurrentSession_JTA简介

    JTA:java transaction  api java里所规定的一种管理事务的API 在另一篇播客我写到了,SessionFactory需要关注两个方法, 即:  openSession     ...

  2. nuxt.js引入客户端脚本和第三方库出现window/document/ navigator未定义问题

    官方文档中已经给出解决方案: 实际操作也比较简单,比如我之前在项目中引入的wangeditor,这个插件里包含了navigator内容 解决:现在nuxt.config.js的webpack扩展配置中 ...

  3. C#(winform)实现不同DPI控件自适应1

    1. PicBox控件 顺便一提关键字:stretch [stretʃ] vt. 伸展,张开 //控制pictureBox图片的显示格式 this.picClose.BackgroundImageLa ...

  4. 如果天空不死博客java阅读列表整理

    如果天空不死的主页https://home.cnblogs.com/u/skywang12345 下面是最近总结的Java集合(JDK1.6.0_45)相关文章的目录. 01. Java 集合系列01 ...

  5. HighCharts理解与总结

    摘自:http://www.highcharts.com/docs/getting-started/installation Installation Highcharts requires two ...

  6. Elasticsearch使用BulkProcessor批量插入

    https://www.elastic.co/guide/en/elasticsearch/client/java-rest/current/java-rest-high-document-bulk. ...

  7. Python36和Python27共存的方法

    Python26和Python37环境的配置 设置环境变量 我的电脑右键属性-高级系统属性-环境变量 选择系统变量中的Path,双击打开 加入你的Python安装路径 C:\Python27;C:\P ...

  8. WPF 用户控件嵌入网页

    WPF使用用户控件嵌入网页,直接使用WebBrowser或Frame会产生报错,报错信息如下: 1.使用WebBrowser,<WebBrowser Source="http://19 ...

  9. JS实现图的创建和遍历

    图分为无向图和有向图 图的存储结构有邻接矩阵.邻接表.十字链表.邻接多重表这四种,最常用的是前两种 本篇主要是利用邻接矩阵实现无向图的创建和遍历(深度优先.广度优先),深度优先其实就是二叉树里的前序遍 ...

  10. AJAX同步问题

    @using ShippingRen.CommonV2.CloudStorage; @using ShippingRen.Api.ServiceModel.PublicDataEntity.Looku ...