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()) ... 

这将在单击元素的父后插入面板上。