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

你可以使用.prev()，它获得匹配元素集中每个元素的前一个兄弟，可选择由选择器过滤。

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

如果您想使用.siblings()，那么

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

Answer 2

你可以尝试

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

Live DEmo

Answer 3

尝试

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

工作示例：http://jsfiddle.net/yiernehr/B2Bcf/1/

Answer 4

你出错了，因为你似乎假设.siblings()将以某种方式处理选择器并从.more的生成遍历以找到.img-circle元素。这不是它的工作原理。

.siblings()将查找与传递的选择器匹配的兄弟;在您的情况下，这是".caller > img.img-circle"，.more元素没有匹配的兄弟姐妹。因此，您对.siblings()的调用将返回空白状态。

正如其他人所指出的那样，你可以使用类似的东西：

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

供参考：http://api.jquery.com/siblings/

如何在jquery中选择兄弟的子元素

4 个答案: