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循环之前移动该行。

Answer 2

在你的循环中，你正在调用$(".day").empty();，它正在删除之前迭代中添加的任何内容......你需要在for循环之外/之前移动它，这样它就不再这样做了。

所以这个：

    for(var i = 1; i < events.length; i ++){
        $(".day").empty();

应该是这样的：

    $(".day").empty();
    for(var i = 1; i < events.length; i ++){

Answer 3

我们可以看到"/getWeek" json ....

的返回结构

因为我认为问题在于function(events){...}，events不是数组......

我认为你应该有events.data.length，然后是events.data[i].somevariable

jquery.append（） - 仅附加列表的最后一个元素，之前的元素将被删除

3 个答案: