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 相关文章推荐
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 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
IIS6的PHP最佳配置方法
2007/03/19 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
实例解析Array和String方法
2016/12/14 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
react的hooks的用法详解
2020/10/12 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
python生成指定长度的随机数密码
2014/01/23 Python
python实现得到一个给定类的虚函数
2014/09/28 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
Python卸载模块的方法汇总
2016/06/07 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
英国女装网上商店:I Saw It First
2018/10/18 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
简历中自我评价怎么写
2014/02/12 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
工作岗位说明书模板
2014/05/09 职场文书
国庆节演讲稿
2014/05/27 职场文书
中班上学期个人总结
2015/02/12 职场文书
环卫工作个人总结
2015/03/04 职场文书
全国助残日活动总结
2015/05/11 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android