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

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