Поиск индекса элементов того же класса, но с разными родителями

Question

Скажем, у меня есть элементы того же класса, но они обернуты в разные родительские div. Как бы я мог найти индекс каждого .child div?

Если бы я должен был вызывать индекс в итераторе, я бы вернулся 0, так как его единственный и единственный .child присутствует в родительском div. То, что я хочу сделать, - это вернуть индекс этих div, основанный на области div #container.

$(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 
    }); 
});