jquery - 将 div 克隆到 DOM 一次

Question

我有以下代码；

$('[class*="time-span"]').on('click', function () {
    var modelPanel = $('.model-detail-panel');
    modelPanel.clone().insertAfter('.timeline', this).slideToggle('fast', function () {
        console.log(this);
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 500);
    });
});

克隆部分运行良好，但是我只希望“modelPanel”在 DOM 中出现一次（每次单击 [class*="time-span"] 时）。目前它在每个“时间线”类之后被多次插入，导致插入了相当多的 div 实例。

我怎样才能让它每次点击只插入一次？

谢谢

Answer 1

使用:first 选择器：

$('[class*="time-span"]').on('click', function () {
    var modelPanel = $('.model-detail-panel');
    modelPanel.clone().insertAfter('.timeline:first', this).slideToggle('fast', function () {
        console.log(this);
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 500);
    });
});

Answer 2

可能是因为您是基于.class.

您可以在 class 中有多个元素.model-detail-panel，因此您要克隆所有元素，而不仅仅是一个。

尝试基于其他属性进行克隆。

Answer 3

您可能需要比在之后插入更具体，.timeline因为 jQuery 将在每个元素上执行它在您的页面上找到的insertAfter一个类。.timeline

尝试使用只在一个地方找到的选择器。

Answer 4

您可以通过删除类来做到这一点。如果类将被删除而不是单击事件将不起作用，或者这将只插入一次

$('[class*="time-span"]').on('click', function () {
    var modelPanel = $('.model-detail-panel');
    modelPanel.clone().insertAfter('.timeline', this).slideToggle('fast', function () {
        console.log(this);
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 500);

 $(this).removeClass("time-span");
    });
});