今天在做一个页面导航栏的过程中遇到了一个小问题,解决之后进行总结,归根结底是“jQuery中如何获取元素的索引值的问题”。
所以首先补充一下基础知识:
jQuery中获取元素索引值有一个方法:index();
这个方法返回指定元素相对于其他指定元素的 index 位置,如果未找到元素,index() 将返回 -1。
它用在两种情况下:
1.寻找元素相对于同胞元素的索引index
<script>
$(document).ready(function(){
$("li").click(function(){
consol.log($(this).index());
});
});
</script>
</head>
<body>
<ul>
<li>我是li1,我的索引是0</li>
<li>我是li2,我的索引是1</li>
<li>我是li3,我的索引是2</li>
</ul>
</body>
2.有时候我们并不需要寻找某个元素相对于同胞元素的索引,而需要获得这个元素相对于与它有着相同样式类等的索引,也是可以用index()这个方法的
<scrip>
$(document).ready(function(){
//在控制台显示id为li_id相对于类名称为li_class的元素的索引
console.log($(".li_class").index($("#li_id")));
});
</script>
</head>
<body>
<ul>
<li>我是li1,我没有类名称</li>
<li class="li_class">我是li2,我有一个叫做li_class的类名称</li>
<li class="li_class" id="li_id">我是li2,我有一个叫做li_class的类名称,还有一个叫做li_id的id名称</li>
</ul>
</body>
-----------------------------------------
顺便说一下js中如何获取索引的问题
直接上例子
<script>
var ul =document.getElementsByTagName("ul")[0];
var li=getElementsByTagName('li');
for (var i = 0; i < li.length; i++)
{
li[i].index = i;
li[i].onclick = function(){
var j = this.index;
alert(this.index);
}
}
</script>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>