JQuery.index()分析


index()函數用於獲取當前jQuery對象中指定DOM元素的索引值。

該函數屬於jQuery對象(實例)。

語法

jQueryObject.index( [ object ] )

參數

參數 描述
object 可選/String/Element/jQuery類型表示指定元素的對象。

jQuery 1.4新增支持:可以不指定object參數、object參數可以為字符串(選擇器)。

參數object可以是DOM元素、jQuery對象或字符串。如果參數object是字符串,則將其視作jQuery選擇器,表示該選擇器所匹配的元素。

返回值

index()方法的返回值為Number類型,返回指定元素的索引位置(從0開始算起)。

注意:以下文本描述中的當前元素表示當前jQuery對象的第一個元素。

  • 如果沒有指定參數object,則返回當前元素在其所有同輩元素中的索引位置。

  • 如果object為String類型,則將其視作選擇器,返回當前元素在選擇器所匹配的元素中的索引位置。如果該選擇器不匹配任何元素或者當前元素不在匹配到的元素內,則返回-1。

  • 如果object為DOM元素或jQuery對象,則返回該元素(或該jQuery對象中的第一個元素)在當前jQuery對象所匹配的元素中的索引位置。

示例&說明

以下面這段HTML代碼為例:

<div id="n1">
    <div id="n2">
        <span id="n3"></span>
        <ul id="n4">
            <li id="n5">item1</li>
            <li id="n6">item2</li>
            <li id="n7">item3</li>
        </ul>
        <span id="n8"></span>
    </div>  
</div>

我們編寫如下jQuery示例代碼,來詳細介紹index()函數。

// 省略參數: 返回第一個li元素在所有同輩元素中的索引
document.writeln( $("li").index( ) ); // 0
// 參數為DOM元素: 返回n6在$li中的索引
document.writeln( $("li").index( document.getElementById("n6") ) ); // 1
// 參數為jQuery對象: 返回$("#n7")在$li中的索引
document.writeln( $("li").index( $("#n7") ) ); // 2

// 參數為選擇器字符串: 返回$li中的第一個元素(即n5)在選擇器"#n4"所匹配的元素中的索引
// 選擇器"#n4"匹配的元素只有n4一個,沒有n5,因此返回-1
document.writeln( $("li").index( "#n4" ) ); // -1

// 省略參數:n4在同輩元素中的索引,n4之前的同輩元素有一個n3,因此返回索引為1
document.writeln ( $("#n4").index( ) ); // 1

// 參數為選擇器字符串:n8在選擇器"span"所匹配的元素中的索引
// 選擇器"span"匹配n3、n8兩個元素,n8是其中的第二個元素,因此返回索引為1
document.writeln ( $("#n8").index( "span" ) ); // 1

如果有興趣,可以在ul增加一個 span,再運行看結果。 可以把ul、li 換成div,再試試


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM