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 AJAX 调用WebService实现代码
Mar 24 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
js实现简单图片拖拽效果
Feb 22 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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文件上传类
2015/10/29 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
express express-session的使用小结
2018/12/12 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
JS表格的动态操作完整示例
2020/01/13 Javascript
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
python批量同步web服务器代码核心程序
2014/09/01 Python
Python中标准模块importlib详解
2017/04/16 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
Django实现组合搜索的方法示例
2018/01/23 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Python实现不规则图形填充的思路
2020/02/02 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
歌唱比赛主持词
2014/03/18 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
社区矫正工作方案
2014/06/04 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript