找到同一個班級但不同父母的元素索引

Question

假設我有同一個班級的元素，但是包含在不同的父級div中。我將如何去尋找每個.child div的索引？

如果我要在迭代器中調用索引，我會返回0，因爲它的父div中存在唯一的.child。我想要做的是取回在#container div範圍內的div的索引。

$(function() { 
 
    $("#container .child").text(function() { 
 
    var i = $(this).index(); 
 
    return "The index of this element is " + i 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="container"> 
 
    <div id="one"> 
 
    <div class="child"></div> 
 
    <div> 
 

 
    <div id="two"> 
 
    <div class="child"></div> 
 
    <div> 
 

 
    <div id="three"> 
 
    <div class="child"></div> 
 
    <div> 
 
</div>

Answer 1

如果你想使用index您可以使用選擇，然後通過在元素獲得索引集合中

$("#container .child").index(this) 

，甚至反過來

$(this).index("#container .child") 

，但最簡單的方法就是在回調函數中使用迭代器：text()

$("#container .child").text(function(i) { 
    return "The index of this element is " + i 
}); 

Answer 2

的第一個參數傳遞給.text()方法回調函數是當前的一組中的索引。

$(function() { 
    $("#container .child").text(function(i) { 
    return "The index of this element is " + i 
    }); 
});