jQuery中index()方法用法实例
本文实例讲述了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索引在使用中的一些困惑
今日同事很正式的向我提出了两个关于jquery的问题,我也很正式得做了回答,顺便把源码贴到这里希望对朋友们有所帮助: 复制代码 代码如下: <script type="text/javascript"> $(function(){ $("input[type=button]").click(function(){ alert($(this).index()); }) }) </script> <ul> <li><
-
jquery 获取当前元素的索引值
JavaScript代码 $("li").hover(function(){ alert($("li").index(this)); }); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] .index函数还是很好用的.它的说明为: 搜索与参数表示的对象匹配的元素,并返回相应元素的索引值.如果找到了匹配的元素,从0开始返回:如果没有找到匹配的元素,返回-1.
-
jQuery实现获取元素索引值index的方法
本文实例讲述了jQuery实现获取元素索引值index的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
-
jQuery在ul中显示某个li索引号的方法
本文实例讲述了jQuery在ul中显示某个li索引号的方法.分享给大家供大家参考.具体分析如下: 这段代码不仅适用于ul和li的元素索引号查找,也适用于其它带有包含关系的元素索引号查找,方法非常的巧妙 $("ul > li").click(function () { // http://www.jb51.net var index = $(this).prevAll().length; //prevAll([expr]): 查找当前元素之前所有的同辈元素 }); 希望本文所述对大
-
jquery获取元素索引值index()示例
jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1. 复制代码 代码如下: <ul> <
-
Jquery index()方法 获取相应元素索引值
index([subject])方法,返回值:Number(从0开始计数) index()方法返回指定元素相对于其他指定元素的 index 位置.注释:如果未找到元素,index() 将返回 -1. 复制代码 代码如下: <html> <head> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js">&l
-
jquery带有索引按钮且自动轮播切换特效代码分享
本文实例讲述了jquery带有索引按钮且自动轮播切换特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的带有索引按钮且自动轮播切换特效代码,实现过程很简单. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" hr
-
jquery获取当前元素索引值用法实例
本文实例讲述了jquery获取当前元素索引值用法.分享给大家供大家参考.具体如下: 今天在做促销页面的图片轮转效果时,下方页码的左边需要对应显示图片的说明信息,效果如下: 思路: 页面部分当为当前状态的时候,会添加"active"样式. 通过获取 li class="active" 的索引值,对应找到相应的图片说明信息,显示出来. 解决: 通过jquery的 index() 可以很轻松的实现该效果. 代码如下: HTML: <div id="caro
-
jQuery 中$(this).index与$.each的使用指南
工作当中响应某个需求,切换选项卡的一个效果,根据每个选项下的内容元素的总数不同而进行不同的html变化(如果选项卡下的内容为空就等于XXX,否则就XXX) 复制代码 代码如下: $(function(){ $(".bao").hide(); $(".bao").eq(0).show(); $(".head li").click(function(){ $(thi
-
JQuery index()方法使用代码
学生科的网站首页有19个Repeater控件.6个div块的tabs切换. 做tabs切换总不能一个个去写方式吧:(代码如下....) 复制代码 代码如下: $(function() { $("#tabs a:eq(0),#tabs2 a:eq(0),#dbt_l_t_tabs a:eq(0),#dbt_r_t_tabs a:eq(0)").addClass("m_on"); $("#tabs a:gt(0),#tabs2 a:gt(0),#dbt_l_t