$(obj).index(this)與$(this).index()異同講解

$(this).index()在使用jQuery時出鏡率非常高，在編寫選項卡及輪播圖等特效時經常用到，但$(obj).index(this)似乎有點陌生。

為便於理解，以下分兩個使用場景加以分析。

場景一： 同級元素標簽相同

    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>

<script>
    //  $(this).index() 測試代碼一
    $("li").on("click",function(){
        var index = $(this).index();
        console.log(index); // 依次點擊li元素輸出： 0,1,2,3
    })
    // $(obj).index(this) 測試代碼二
    $("li").on("click",function(){
        var index = $("li").index(this);
        console.log(index); // 依次點擊li元素輸出： 0,1,2,3

}) </script>

 執行兩段腳本並依次點擊li元素，都是輸出： 0/1/2/3，在這個場景下，作用一樣。

場景二：同級元素標簽不相同

    <div>
        <p>this is span</p>
        <p>this is span</p>
        <b>this is b</b>
        <b>this is b</b>
    </div>

<script>
    //  $(this).index() 測試代碼一
    $("b").on("click",function(){
        var index = $(this).index();
        console.log(index); // 依次點擊b元素輸出:2,3
    })
    // $(obj).index(this) 測試代碼二
    $("b").on("click",function(){
        var index = $("b").index(this);
        console.log(index); // 依次點擊b元素輸出:2,3
    })
</script>

測試代碼一中，index()是元素在當前同級元素中的位置下標，不區分標簽；

測試代碼二中，返回值是當前操作元素（this）在$（"b"）集合中的下標。（$( "b" )是jQuery對象集合，所以非同級元素也可以使用，有興趣自己可以測試）