jquery .index( ) 的用法

最新推荐文章于 2022-12-10 15:33:59 发布

weixin_30315905

最新推荐文章于 2022-12-10 15:33:59 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bigdesign/p/4514847.html

本文演示了如何使用jQuery获取HTML元素在同辈元素中的索引值，包括使用ID、DOM元素、集合中元素及不存在元素的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Example: 返回ID为bar的元素相对于同辈的索引值。
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<script>
var index = $('#bar').index(); // 获取当前jquery对象在同辈元素中的index
</script>

-----------

Example: 返回ID为bar的元素的索引值。
<ul>
    <li id="foo">foo</li>
    <li id="bar">bar</li>
    <li id="baz">baz</li>
</ul>
<script>
var index = $('li').index( $('#bar') ); // 获取当前的 jquery 对象在$("li") 集合中的index
</script>

-----------
Example: 返回dom元素的索引值。
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
<script>
var index = $("div").index(this); // 获取当前点击的div（dom对象）在$("div") 集合中的index
</script>

-----------

Example: 由于没有元素的ID为foobar，所以返回 -1。
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<script>
var index = $("li").index( $('#foobar') ); // -1 获取不存在于集合中的jquery对象
</script>

-----------

Example: 返回jQuery集合中第一项的索引值。
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<script>
var index = $('li').index( $('li:gt(0)') ); // 获取多个 jquery 对象在$("li") 集合中的index，结果是多个jq对象中第一个的index值。
</script>

-----------

Example: 返回ID为bar的元素相对于所有 <li> 元素的索引值。
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<script>
var index = $('#bar').index('li'); // 获取当前jquery对象在dom集合中的index
</script>

-----------