insertAfter clicked元素

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'company-detail-panel'。

这个新的div应该出现在时间轴类之后，并且只出现在被点击的时间轴类的父div中。

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

如何修改我的代码以仅定位元素的单击父元素，从而插入div一次？

提前致谢。

Answer 1

使用

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

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