jquery 动态生成的内容兄弟问题

Question

我正在接近我正在寻找的解决方案，但还有一个问题让我感到不适。这是我的 fiddle :(http://jsfiddle.net/CjHAD/10)

我需要清理它，以便当打开红色点击 div 并打开黑色点击 div 时，蓝色点击拇指不会在 .parent-box 同级内复制自身。

欢迎任何关于使它更优雅、流畅和高效的一般提示，如果需要，我很乐意澄清!

代码如下: 这是代码: HTML:

<div class="parent-box">
    <h3>2013</h3>
    <div class="works-post">
        <div class="x-image" style="color: red">click</div><!--open/close content-->
        <div class="works-thumb">                       
            <img width="150" height="112"  />
        </div><!--.works-thumb-->
        <div class="toggle-content">
            <h4>Content</h4>
        </div><!--.toggle-content-->
    </div><!--.works-post-->
</div><!--.parent-box-->
<div class="parent-box">
    <h3>2012</h3>
    <div class="works-post">
        <div class="x-image" style="color: blue">click</div><!--open/close content-->
        <div class="works-thumb">                       
            <img width="150" height="112"  />
        </div><!--.works-thumb-->
        <div class="toggle-content">
            <h4>Content</h4>
        </div><!--.toggle-content-->
    </div><!--.works-post-->
    <div class="works-post">
        <div class="x-image">click</div><!--open/close content-->
        <div class="works-thumb">                       
           <img width="150" height="112"  />
        </div><!--.works-thumb-->
        <div class="toggle-content">
            <h4>Content</h4>
        </div><!--.toggle-content-->
    </div><!--.works-post-->
</div><!--.parent-box-->

我的 CSS:

h3 {
clear: both;
width: 100%;
}
.x-image {
border: solid thin #000;
float: left;
padding: 0 2px 0 0;
position: relative;
z-index: 15;    
}
.works-thumb {
margin: 5px 0 0 10px;
width: 25%;
}
.works-thumb img {
border: solid 2px #a8b9b7;  
}
.works-post {
border: none;
float: left;
padding-bottom: 2em;    
}
.toggle-content {
    display: none;
    margin: 0px 0 0 1.5em;
    padding-bottom: 1em;
    min-height: 150px;
}
.open {
background-color: #eee;
clear: both;
width: 100%;
border-top: solid thin #ccc;
border-bottom: solid thin #ccc;
}

和我的 jQuery:

$(document).ready(function(){

$('.x-image').on('click', (function(event){
    var other = $(this).parent().siblings('.works-post');
    var beyond = $(this).closest('.parent-box').siblings().find('.works-post');

    $(this).closest('.works-post').find('.works-thumb').toggle('fast');
 $(this).closest('.works-post').find('.toggle-content').slideToggle('fast', function(){
            $(this).closest('.works-post').toggleClass('open',$(this).is(':visible'));

                other.removeClass('open').insertAfter($('.open'));

                other.find('.toggle-content').hide();
                other.find('.works-thumb').show();

                beyond.removeClass('open');

                beyond.find('.toggle-content').hide();
                beyond.children('.works-thumb').filter(':hidden').show();

        })

}))

});

谢谢!

Answer 1

删除对 .insertAfter($('.open')) 的调用似乎可以解决您所引用的问题。在调用该方法时，有两个类为 open 的元素，因此您在两个地方插入了 other 的内容。您执行插入的意图是什么？

other.removeClass('open');

jsfiddle

更新:

如果您试图将打开的works-post 移动到其parent-box 中的集合顶部，您可以使用.insertBefore() 来实现。引用 other.first()。

为了清楚起见，我冒昧地修改了您的代码。除了删除 .insertAfter() 和在末尾添加 .insertBefore() 之外，它基本上做与原始相同的事情。

$(document).ready(function () {
    $('.x-image').on('click', (function (event) {
        var thisPost = $(this).closest('.works-post');
        var thisBox = $(this).closest('.parent-box');
        var otherPosts = thisPost.siblings('.works-post');
        var beyondPosts = thisBox.siblings('.parent-box').find('.works-post');

        thisPost.find('.works-thumb').toggle('fast');
        thisPost.find('.toggle-content').slideToggle('fast', function () {
            thisPost.toggleClass('open', $(this).is(':visible'));

            otherPosts.removeClass('open');
            otherPosts.find('.toggle-content').hide();
            otherPosts.find('.works-thumb').show();

            beyondPosts.removeClass('open');
            beyondPosts.find('.toggle-content').hide();
            beyondPosts.children('.works-thumb').filter(':hidden').show();

            thisPost.insertBefore(otherPosts.first());
        });
    }));
});

jsfiddle