javascript - jquery.append() - 仅附加列表的最后一个元素，前面的元素被删除

Question

我有一个这样的页面:

<div id="daysTable">
    <div id="day0" class="day"></div>
    <div id="day1" class="day"></div>
    <div id="day2" class="day"></div>
    <div id="day3" class="day"></div>
    <div id="day4" class="day"></div>
    <div id="day5" class="day"></div>
    <div id="day6" class="day"></div>
</div>

还有一些 javascript 来填充我的日历，如下所示

function getWeek(){
    $.getJSON("/getWeek",function(events){
        var eventHeight = $("#hoursTable > div").height();
        var eventWidth = $("#daysTable > div").width();
        var startWeek = events[0]// timestamp of the start of the week
        for(var i = 1; i < events.length; i ++){
            $(".day").empty();
            var startHour = (events[i].startDate - startWeek)/3600
            var duration = (events[i].stopDate - startWeek)/3600 - startHour
            var dayStart = Math.floor(startHour/24);
            var startHour = startHour - dayStart * 24
            divEvent = $('<div id="event'+events[i].idEvent+'"/>')
                .width(eventWidth-2)
                .height(duration*eventHeight)
                .css("border","1px solid black")
                .css("margin-top",startHour*eventHeight)
                .html(events[i].name);
            divEvent.appendTo("#day"+dayStart);
            console.log(divEvent);
        }
    });
}

我的问题是:事件包含 3 个我想显示的元素，但只显示最后一个。 如果我在第一次迭代时停止“for”，我可以看到附加的第一个 div，但似乎如果我的循环进行三个迭代，则前两个将被删除。 console.log() 显示一些“不再”的现有元素。 有什么想法吗？

Answer 1

通过在循环顶部调用 $(".day").empty();，您可以在添加每个新事件之前删除所有事件。

您需要将该行移到 for 循环之前。