日付を反復する2つのループ

Question

javascript（jQuery + moment.js）によって生成されるカレンダーを作成しようとしました。開始日はプロジェクトのiso週コードの開始日で、終了日はプロジェクトのiso週コードの終了日です。私は開始日から始まり、終了日に終わる日付を通して2回反復しようとしています。

問題は、最初の反復の後に2番目の反復が実行されないということです。理由はわかりません。何か案は？

$(function(){ 
 
\t \t \t \t var startAt = moment(("2017-02-15 00:00:00").substring(0,10), "YYYYMMDD"); 
 
     var finishAt = moment(("2017-12-28 00:00:00").substring(0,10), "YYYYMMDD"); 
 
     
 
     var startAtWeekCode = startAt.isoWeek(); 
 
     var finishAtWeekCode = finishAt.isoWeek(); 
 
     
 
     var startAtYear = startAt.year(); 
 
     var finishAtYear = finishAt.year(); 
 
     
 
     var startAtDay = startAt.startOf('isoWeek'); 
 
     var finishAtDay = finishAt.endOf('isoWeek'); 
 
     
 
     var daysLength = finishAtDay.diff(startAtDay, 'days'); 
 
     
 
     $(".week-grid").css({ 
 
      width: daysLength*15 
 
     }); 
 

 
    for(var i=startAtDay; i<finishAtDay; i.add(1, "month")){ 
 
     console.log("MONTH"); 
 
     var $monthItem = $('<div class="month"></div>'); 
 
     $monthItem.text(i.format("MMMM")); 
 
     $monthItem.css({ 
 
     width: i.daysInMonth()*15 
 
     }); 
 

 
     $(".line-calendar.project-calendar-months").append($monthItem); 
 
    } 
 
    
 
    for(var j=startAtDay; j<finishAtDay; j.add(1, "day")){ 
 
      console.log("day"); 
 
      var classSat = ""; 
 
      var classSun = ""; 
 
      var classHoli = ""; 
 
      
 
      
 
      if(j.day() == 6){ 
 
       classSat = " sat "; 
 
      } 
 
      if(j.day() == 0){ 
 
       classSun = " sun "; 
 
      } 
 
      $(".line-calendar.project-calendar-days").append('<div data-day-of-week="'+ j.day() +'" class="day' + classSat + classSun + classHoli + '">' + j.date() + '</div>'); 
 
     } 
 
});

.overflow-x{ 
 
position: absolute; 
 
width: 300px; 
 
height: 100px; 
 
overflow-x: auto; 
 
overflow-y: hidden; 
 
} 
 

 
.month { 
 
    color: #666; 
 
    height: 15px; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
.day { 
 
    width: 15px; 
 
    height: 15px; 
 
    line-height: 14px; 
 
    font-size: 9px; 
 
    font-weight: normal; 
 
    float: left; 
 
    color: #333; 
 
} 
 

 
.sat { 
 
    background-color: #f9f9f9; 
 
    color: #000; 
 
} 
 

 
.sun { 
 
    background-color: #f4aab5; 
 
    color: #000; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="overflow-x"> 
 
    <div class="week-grid"> 
 
    <!-- MONTHS --> 
 
    <div class="line-calendar separator-row header noselect project-calendar-months"> 
 

 
    </div> 
 
    <!-- DAYS --> 
 
    <div class="line-calendar separator-row header noselect project-calendar-days"> 
 

 
    </div> 
 
    </div> 
 
</div>

Link to JSFiddle

Answer 1

あなたは参照としてiとjからstartAtDayを割り当てている、両方の変数は、サイクルごとに変異しているのと同じstartAtDayへの参照を、持っています。あなたが最初のループであなたのstartAtDateを変更しているのでhttps://jsfiddle.net/kfwxrv3o/

Answer 2

：あなたはそれを変異する前に値を複製する必要がある

：https://momentjs.com/docs/#/parsing/moment-clone/

ここではplunker更新されます。 javascriptで代入を行うと、オブジェクトをコピーせずに、メモリ内のオブジェクトへの新しいリンクを作成するだけです。したがって、最初のループを記述するとき、オブジェクトにはiという新しい参照があり、このオブジェクトはこのルールで変更する必要があります。i.add(1, "month"))、ステップバイステップ、startAtDateはすでにfinishAtDay以上です。問題は、なぜ2番目のループも開始されていません。