javascript - 单击元素后插入

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

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