jquery - 简单的显示和隐藏带有父元素的元素

Question

我想隐藏父 div 并显示父父（同一类）的下一个 div。

<div class="collections">
<div class="switchswitch"> 
<span>title</span>
<span class="switch middle">
<img class="wp-post-image" src="image.jpg">
</span>
</div>

<div class="switchswitch"> 
<span>title</span>
<span class="switch middle">
<img class="wp-post-image" src="image.jpg">
</span>
</div>

<div class="switchswitch"> 
<span>title</span>
<span class="switch middle">
<img class="wp-post-image" src="image.jpg">
</span>
</div>

</div>

...CSS：

.switchswitch {
    display: none;
}
.selected{
    display: block;
}

...和js：

$('.wp-post-image').click(function(){
    var $next = $('.switchswitch').removeClass('selected').parent('.collections').next('.section')
    if ($next.length) {
    $next.addClass('selected'); 
    }
    else {
        $(".switchswitch:first").addClass('selected');
    }
});

它应该是一个循环，每次我单击“wp-post-image”类的图像时，父 div“switchswitch”应该被隐藏，下一个“switchswitch”应该出现..

Answer 1

尝试

$('.wp-post-image').click(function(){
    var $next = $(this).closest('.switchswitch').removeClass('selected').closest('.collections').next().find('.switchswitch')
    if ($next.length) {
    $next.addClass('selected'); 
    }
    else {
        $(".switchswitch:first").addClass('selected');
    }
});

Answer 2

原始脚本遍历.collections元素，然后搜索.section标记中不存在的下一个元素。

Javascript

$('.wp-post-image').click(function(){
    var $curSection = $(this).closest(".switchswitch");        
    $curSection.removeClass('selected');
    var $next =  $curSection.next(".switchswitch");
    if ($next.length) {
        $next.addClass('selected'); 
    }
    else {
        $(".switchswitch:first").addClass('selected');
    }
});

工作示例：http: //jsfiddle.net/GJp3k/

Answer 3

尝试这个

$('.wp-post-image').click(function() {
                var $next = $(this).parent().parent().removeClass('selected').next('.switchswitch');
                    if ($next.length) {
                        $next.addClass('selected');
                    }
                    else {
                        $(".switchswitch:first").addClass('selected');
                    }
                });