1. 程式人生 > >jQuery - 使用要點 - .index()函式

jQuery - 使用要點 - .index()函式

.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" );
 
// 隱式呼叫 .first() 方法
console.log( "Index: " + listItem.index() ); // 1
console.log( "Index: " + listItem.first().index() ); // 1
 
var div = $( "div" );
 
// 隱式呼叫 .first() 方法
console.log( "Index: " + div.index() ); // 0
console.log( "Index: " + div.first().index() ); // 0

上方示例中,.index() 返回基於0的索引,#foo1 是父容器中的第二個子元素,所以返回值為:1。

注意:在 jQuery 1.9 之前,.index() 只工作於單獨確定的元素,所以在呼叫前,需要使用 .first() 來確定單獨的元素;jQuery 1.9 之後可以忽略。

字串引數 .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 將會在原始的 jQuery 物件上隱式的呼叫 .first() 方法,將會找到第一個元素。

其次,jQuery 會使用傳入的字串選擇器來查詢整個的 DOM,然後在新的查詢結果集中來檢索索引。

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

上方程式碼案例中,jQuery 物件集中的第一個元素被傳入 .index() 方法,之後檢索該傳入元素在 jQuery 物件集中的索引值。

DOM 元素引數 .index()

功能形式同 jQuery 物件引數的 .index() 方式。