jquery動態生成的內容兄弟問題

Question

我越來越接近我正在尋找的解決方案，但有一個更多的問題，讓我適合。這裏是我的小提琴：（http://jsfiddle.net/CjHAD/10）

我需要清理這個，所以當紅色點擊div打開，我打開黑色點擊div時，藍色的點擊拇指不重複自己.parent框兄弟姐妹。

歡迎任何關於使這個更優美，流暢和高效的技巧，我很樂意澄清，如果需要！

下面是代碼： 以下是代碼： 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