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

Question

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

0

У меня есть следующий 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 повторяется в другом месте).

alias51 26 окт. 2013, в 21:03

Источник

Теги:

jquery

4 ответа

0

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

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

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

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

Satpal 26 окт. 2013, в 16:44

0

пытаться

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

Рабочий пример: http://jsfiddle.net/yiernehr/B2Bcf/1/

RafH 26 окт. 2013, в 16:34

0

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

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

Live DEmo

Vinay Pratap Singh 26 окт. 2013, в 16:10

Ещё вопросы

BYossarian · Accepted Answer · 2013-10-26T17-26-00.000Z

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

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

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

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

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