.index() только для одного экземпляра класса

Question

У меня проблема с функцией .index() в jQuery. из three с в two пользователь нажимает, один из threeB показаны

<div class="one"> 
    <div class="two"> 
     <div class="three"></div> 
     <div class="three"></div> 
     <div class="three"></div> 
    </div> 
    <div class="threeB"></div> 
    <div class="threeB"></div> 
    <div class="threeB"></div> 
</div> 

<div class="one"> 
    <div class="two"> 
     <div class="three"></div> 
     <div class="three"></div> 
    </div> 
    <div class="threeB"></div> 
    <div class="threeB"></div> 
</div> 

<div class="one"> 
    <div class="two"> 
     <div class="three"></div> 
     <div class="three"></div> 
     <div class="three"></div> 
    </div> 
    <div class="threeB"></div> 
    <div class="threeB"></div> 
    <div class="threeB"></div> 
</div> 

В соответствии с которым:

План DOM. Я хотел сделать это с помощью функции .index(), но она терпит неудачу для всех, кроме первых. Во втором классе one два three имеют индексы 3 и 4 (вместо желаемых 0 и 1). С другой стороны, .eq() для threeB s, похоже, работает по своему усмотрению.

Какой-либо опрятный способ решить это, не подсчитывая, сколько three было там до div?

Answer 1

Это работает так:

$('.three').click(function(){ 
    $(this).parent().parent().find('.threeB').eq($(this).index()) 
     .css('background','green'); 
}); 

Проверить здесь: jsFiddle