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应该出现在timeline类之后，并且只出现在所单击的timeline类的父div中。

我的代码是插入div，但它将它添加到每个时间线类之后，这不是我需要的行为。

如何修改我的代码，使其只针对单击的元素的父元素，从而插入一次div？

提前谢谢。

Answer 1

使用

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

这会将您的面板插入到所单击元素的父元素之后。