insertAfter單擊元素

Question

我有以下標記;

<div class="model-timeline"> 
     <p>Text</p> 
     <div class="timeline"> 
      <div class="span-blank-5"></div> 
      <div class="time-span-1"></div> 
      <div class="time-span-2"></div> 
      <div class="time-span-2"></div> 
     </div> 
    </div> 
<div class="model-timeline"> 
     <p>Text</p> 
     <div class="timeline"> 
      <div class="span-blank-5"></div> 
      <div class="time-span-1"></div> 
      <div class="time-span-2"></div> 
      <div class="time-span-2"></div> 
     </div> 
    </div> 

and script;

$('[class*="time-span"]').on('click', function() { 
    $('.model-detail-panel').insertAfter('.timeline').slideDown('fast', function() { 
     $('html,body').animate({ 
      scrollTop: $(this).offset().top 
     }, 500); 
    }); 
}); 

點擊其中一個時間跨度類後，我需要插入一個新的div'model-detail-panel'。

這個新的div應該出現在時間線類之後，並且只在被點擊的時間線類的父div內出現。

我所擁有的代碼是插入div，但是它在每個時間線類之後添加它並非我需要的行爲。

我該如何修改我的代碼以僅定位元素的單擊父項，因此插入一次div？

在此先感謝。

Answer 1

使用

$('.model-detail-panel').insertAfter($(this).parent()) ... 

這將在單擊元素的父後插入面板上。