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

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