Как выбрать дочерний элемент одноранговых в JQuery

Question

У меня есть следующий HTML:

<div class="col-md-4"> 

    <div class="participant" id="participant-1"> 

     <div class="caller"> 
      <img src="public/img/caller.png" class="img-circle transparent"> 
     </div> 

     <div class="more"><img src="public/img/more.png"></div> 


    </div> 
</div> 

Я пытаюсь переключить прозрачный класс Img, когда «больше» нажата.

Я следующий код:

$(this).siblings(".caller > img.img-circle").toggleClass("transparent"); 

Где я буду неправильно? Я хочу убедиться, что переключатель влияет только на класс внутри одного и того же родителя (HTML повторяется в другом месте).

Answer 1

Ты неправильно, потому что вы, кажется, предполагая, что .siblings() будет обрабатывать селектор каким-то образом и пройти вниз от поколения .more найти .img-circle элемент. Это не так, как это работает.

.siblings() будет искать родственника, соответствующего пройденному селектору; в вашем случае это ".caller > img.img-circle", и у элемента .more нету брака с детьми, которые соответствуют этому. Поэтому ваш звонок .siblings() возвращается пустым.

Как уже отмечалось, вы можете использовать что-то вроде:

$(this).siblings('.caller').find('.img-circle').toggleClass('transparent'); 

для справки: http://api.jquery.com/siblings/

Answer 2

Вы можете использовать .prev(), он получает непосредственно предшествующий родственный элемент каждого элемента в наборе согласованных элементов, необязательно отфильтрованный селектором.

$(this).prev().find("img.img-circle").toggleClass("transparent"); 

, если вы хотите использовать .siblings() затем

$(this).siblings(".caller").find("img.img-circle").toggleClass("transparent"); 

Answer 3

вы можете попробовать

$(this).parent().find(".caller > img.img-circle").toggleClass("transparent"); 

Live DEmo

Answer 4

попробовать

$('.more').on('click', function(e) { 
    $(this).parent().find('.img-circle').toggleClass("transparent"); 
}); 

Работа Exemple: http://jsfiddle.net/yiernehr/B2Bcf/1/