jquery中index()
类别:Web前端 浏览量:353
时间:2015-11-25 jquery中index()
jquery中index()index() 方法返回指定元素相对于其他指定元素的 index 位置。
一、语法
$(selector).index( [ element] )
其中:element 为可选,表示指定元素的对象。
二、index()使用时注意事项
1、索引值从0开始计数
2、如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
3、如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
4、如果参数为String类型,则将其视作选择器,返回当前jQuery对象的第一个元素
在选择器所匹配的元素中的索引位置。如果该选择器不匹配任何元素或者当前jQuery对象的第一个元素
不在匹配到的元素内,则返回-1。
四、index()实例
1、
<ul> <li id="foo">foo</li> <li id="bar">bar</li> <li id="baz">baz</li> </ul> <script> $('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置 $('li').index($('#bar')); //1,传递一个jQuery对象 $('li').index($('li:gt(0)')); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置 $('#bar').index('li'); //1,传递一个选择器,返回#bar在所有li中的做引位置 $('#bar').index(); //1,不传递参数,返回这个元素在同辈中的索引位置。 </script>
2、
<ul> <li id="foo">foo</li> <li id="bar">bar</li> <li id="baz">baz</li> </ul> <script> $('#bar').index() //返回值是1,而不是0 </script>//原因:
// 因为不传入参数,index()返回的是与('#bar')同辈的位置,而在上述例子当中li是与下面的li同辈的,所以返回值是1
3、
<li id="n1"> <li id="n2"> <span id="n3"></span> <ul id="n4"> <li id="n5">item1</li> <li id="n6">item2</li> <li id="n7">item3</li> </ul> <span id="n8"></span> </li> </li> <script> // 省略参数: 返回第一个li元素在所有同辈元素中的索引 document.writeln( $("li").index( ) ); // 0 // 参数为DOM元素: 返回n6在$li中的索引 document.writeln( $("li").index( document.getElementById("n6") ) ); // 1 // 参数为jQuery对象: 返回$("#n7")在$li中的索引 document.writeln( $("li").index( $("#n7") ) ); // 2 // 参数为选择器字符串: 返回$li中的第一个元素(即n5)在选择器"#n4"所匹配的元素中的索引 // 选择器"#n4"匹配的元素只有n4一个,没有n5,因此返回-1 document.writeln( $("li").index( "#n4" ) ); // -1 // 省略参数:n4在同辈元素中的索引,n4之前的同辈元素有一个n3,因此返回索引为1 document.writeln ( $("#n4").index( ) ); // 1 // 参数为选择器字符串:n8在选择器"span"所匹配的元素中的索引 // 选择器"span"匹配n3、n8两个元素,n8是其中的第二个元素,因此返回索引为1 document.writeln ( $("#n8").index( "span" ) ); // 1 </script>
标签:jquery
您可能感兴趣
- jquery属性选择器
- jquery on绑定多个事件
- jquery中text(),val(),html()区别
- jquery中使用detach 移除元素
- jQuery如何操作下拉框select
- jquery 增加表格(jquery实现表格无缝滚动)
- jquery中filter
- jquery ajax详细教程(jquery+Ajax实现简单分页条效果)
- jQuery里$(this)和this的区别有哪些
- JQuery中serialize与serializeArray
- jquery图片轮播代码
- jquery中unbind、bind
- jquery中animate
- jquery轮播图的左右按钮(jQuery轮播图功能实现方法)
- jquery无缝滚动代码(jQuery实现表格行数据滚动效果)
- jquerycss3轮播案例(CSS3实现列表无限滚动/轮播效果)
- 八一节,说说中国女兵(八一节说说中国女兵)
- 王治郅菜鸟赛季已让八一带入正轨,大郅七大经典语录或是成功秘诀(王治郅菜鸟赛季已让八一带入正轨)
- 庆八一,重读经典红色语录,感悟互联网发展硬道理(重读经典红色语录)
- TVB新剧《黯夜守护者》将播,陈展鹏陈炜首次合作探讨人性(TVB新剧黯夜守护者将播)
- 新晋小花被称女版吴卓羲 将取代滕丽名成为TVB新一代御用女警(新晋小花被称女版吴卓羲)
- 艺人吴卓羲10年警察生涯,演足10年阿Sir,系咩玩法(艺人吴卓羲10年警察生涯)
热门推荐
- tomcat服务如何在eclipse中配置(HBuilderX配置tomcat外部服务器查看编辑jsp界面的方法详解)
- mysql的日志怎么清除(MySQL删除了记录不生效的原因排查)
- html5开发的app(浅谈Html5页面打开app的一些思考)
- css3浮动教程(CSS3使用多列制作瀑布流)
- php数组练习题答案(PHP 数组黑名单/白名单实例代码详解)
- 国内云主机哪家靠谱(云主机哪家比较便宜)
- php服务器有哪些(php服务器的系统详解)
- sql server代理无法启动服务(SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法)
- sql server支持两种登录验证方式(远程登陆SQL Server 2014数据库的方法)
- SQL SERVER存储过程中使用事务与try catch