JQuery官方学习资料（译）：使用JQuery的.index()方法

2016-04-26 14:16:10 来源: 阅读:

.index()是一个JQuery对象方法，一般用于搜索JQuery对象上一个给定的元素。该方法有四种不同的函数签名，接下来将讲解这四种函数签名的具体用法。

无参数的.index()

<ul>

<div></div>

<li id="foo1">foo</li>

<li id="bar1">bar</li>

<li id="baz1">baz</li>

<div></div>

</ul>

var $foo = $( "#foo1" );

console.log( "Index: " + $foo.index() ); // 1

var $listItem = $( "li" );

// 隐式调用.last()

console.log( "Index: " + $listItem.index() ); // 3

console.log( "Index: " + $listItem.last().index() ); // 3

var $div = $( "div" );

console.log( "Index: " + $div.index() ); // 4

console.log( "Index: " + $div.last().index() ); // 4

在第一个例子中，.index()给出的是#foo1在其父节点内的序号（从0开始），由于它是其父节点中的第二个元素所以返回的是1。

当一个JQuery对象调用.index()时，如果它包含了多个元素，那么不会计算其中第一个元素的序号，而是计算其中最后一个元素的序号，这相当于总是调用$jqObject.last().index()。

一个字符串作为参数的.index()

<ul>

<div class="test"></div>

<li id="foo1">foo</li>

<li id="bar1" class="test">bar</li>

<li id="baz1">baz</li>

<div class="test"></div>

</ul>

<div id="last"></div>

var $foo = $( "li" );

// 隐式调用.first()

console.log( "Index: " + $foo.index( "li" ) ); // 0

console.log( "Index: " + $foo.first().index( "li" ) ); // 0

var $baz = $( "#baz1" );

console.log( "Index: " + $baz.index( "li" )); // 2

var $listItem = $( "#bar1" );

console.log( "Index: " + $listItem.index( ".test" ) ); // 1

var $div = $( "#last" );

console.log( "Index: " + $div.index( "div" ) ); // 2

当传入一个字符串作为参数来调用.index()时，有两个情况需要注意。

第一，JQuery对象将隐式调用.first()，因此它将获取第一个元素的序号，而非最后一个元素。

第二，JQuery对象是根据字符串选择器查询整个DOM，并且检测其在这个字符串选择器元素集合中的序号。

例如，使用.index( "div" )的时候，选择的是整个文档中的所有div元素中的第一个元素。

一个JQuery对象作为参数的.index()

<ul>

<div class="test"></div>

<li id="foo1">foo</li>

<li id="bar1" class="test">bar</li>

<li id="baz1">baz</li>

<div class="test"></div>

</ul>

<div id="last"></div>

var $foo = $( "li" );

var $baz = $( "#baz1" );

console.log( "Index: " + $foo.index( $baz ) ); // 2

var $tests = $( ".test" );

var $bar = $( "#bar1" );

// 隐式调用参数的.first()

console.log( "Index: " + $tests.index( $bar ) ); // 1

console.log( "Index: " + $tests.index( $bar.first() ) ); // 1

这种情况下，将会检查传入.index()的JQuery对象的第一个元素在原JQuery对象元素中的序号，这个原JQuery对象就是.index()左侧的那个JQuery对象。

一个DOM元素作为参数的.index()

这种情况下，将会传入一个DOM元素到.index()中，并检查其在原JQuery对象元素集合中的序号。

Tags：[db:关键字]

相关文章列表:

热门排行

关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助