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> 

및 스크립트;

$('[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()) ... 

이 클릭 된 요소의 부모 후 패널을 삽입합니다.