您的位置：首页 > Web前端 > JQuery

jQuery中如何获取元素的索引值&js获取索引

2018-03-19 18:06 375 查看

今天在做一个页面导航栏的过程中遇到了一个小问题，解决之后进行总结，归根结底是“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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery中如何获取元素的索引值

相关文章推荐

新的分享

章节导航