jQuery中index()方法用法实例


Posted in Javascript onDecember 27, 2014

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

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

语法结构一:

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

$(selector).index()

实例代码:

实例一:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<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="https://3water.com/" />

<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="https://3water.com/" />

<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="https://3water.com/" />

<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="https://3water.com/" />

<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程序设计有所帮助。

Javascript 相关文章推荐
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
绑定回车enter事件代码
May 18 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
JS请求servlet功能示例
Jun 01 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
js 数组 fill() 填充方法
Nov 02 Javascript
jQuery中get()方法用法实例
Dec 27 #Javascript
jQuery的context属性用法实例
Dec 27 #Javascript
jQuery对象的selector属性用法实例
Dec 27 #Javascript
jQuery对象的length属性用法实例
Dec 27 #Javascript
jQuery中size()方法用法实例
Dec 27 #Javascript
jQuery中each()方法用法实例
Dec 27 #Javascript
jQuery.holdReady()方法用法实例
Dec 27 #Javascript
You might like
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
vue跨域解决方法
2017/10/15 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
基于Python实现文件大小输出
2016/01/11 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
python字典一键多值实例代码分享
2019/06/14 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
积极向上的团队口号
2014/06/06 职场文书
承诺书样本
2014/08/30 职场文书
施工安全保证书
2015/05/09 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
python学习之panda数据分析核心支持库
2021/05/07 Python