jQuery中獲取使用索引（）的元素的索引

Question

$(document).ready(function() { 
 
    var box = $('.box'); 
 
    box.click(function() { 
 
    console.log($(this).index()); 
 
    }); 
 
});

div, section { 
 
    border: 1px solid red; 
 
    width: 80px; 
 
    height: 80px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box">1</div> 
 
<div class="box">2</div> 
 
<div class="para">3</div> 
 
<div class="box">4</div>

在上述HTML，與.box類的最後一個div是第三.box，我想最後.box的索引是3 ，但我得到4。我應該使用哪個jQuery函數，它將搜索所有div類的box，然後在點擊.box的位置返回我的位置.box？

Answer 1

可以使用.index()當你比較它一組元素與$('.box').index($(this))

如果選擇字符串被作爲參數傳遞，的.index（）返回一個整數 指示第一元件的位置在相對於選擇器匹配的元素的jQuery 對象內。

順便說一句，.index()是從零開始的，所以索引應該是0,1和2.如果你想要1,2和3，只需要在結果中加1。

$(document).ready(function() { 
 
    var box = $('.box'); 
 
    box.click(function() { 
 
    console.log($('.box').index($(this))); 
 
    }); 
 
});

div, 
 
section { 
 
    border: 1px solid red; 
 
    width: 80px; 
 
    height: 80px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box">1</div> 
 
<div class="box">2</div> 
 
<div class="para">3</div> 
 
<div class="box">4</div>