用javascript包裹受影響的div

Question

使用moment.js我編寫了一個腳本，它通過一系列事件並隱藏那些在6個多小時前開始並被視爲完成的腳本。

var x=document.getElementsByClassName("event"); 
    for (var i=0;i<x.length;i++) { 
     var starttime = moment((x[i].getElementsByClassName("start")[0].childNodes[0].nodeValue), 'YYYY-MM-DD HH:mm'); 
     var cutoff = moment().subtract(6, 'hours').format('YYYY-MM-DD HH:mm'); 
     if (starttime.isBefore(cutoff)) { 
       var expired=(x[i].getElementsByClassName("event-container")[0]); 
       expired.style.display = "none"; 
     } 
    } 

腳本工作正常，但完全隱藏div並不是最好的主意。相反，我想將所有過期的事件都封裝在一個div中，然後可以打開，如果您仍想查看它們。我該如何去做呢？

最終的結果會是這樣的：

<div class="openclose"> 
     <div class="event"> 
      <div class="event-container"> 
       Old event info goes here 
      </div> 
     </div> 
     <div class="event"> 
      <div class="event-container"> 
       Old event info goes here 
      </div> 
     </div> 
    </div> 

    <div class="event"> 
     <div class="event-container"> 
      New event info goes here 
     </div> 
    </div> 

    <div class="event"> 
     <div class="event-container"> 
      New event info goes here 
     </div> 
    </div> 

Answer 1

本

var oldEvents = document.getElementById("oldEvents"); 
var x=document.getElementsByClassName("event"); 
for (var i=0;i<x.length;i++) { 
    var starttime = moment((x[i].getElementsByClassName("start")[0].childNodes[0].nodeValue), 'YYYY-MM-DD HH:mm'); 
    var cutoff = moment().subtract(6, 'hours').format('YYYY-MM-DD HH:mm'); 
    if (starttime.isBefore(cutoff)) { 
      oldEvents.appendChild(x[i]); 
    } 
} 

替換您的JavaScript這將event DIV追加到oldEvents DIV與appendChild()

您可以使用在你的html裏面一個空的div，它會被時間填滿。

<div class="openclose" id="oldEvents"> 
    <div class="event"> 
     <div class="event-container"> 
      Old event info goes here 
     </div> 
    </div> 
    <div class="event"> 
     <div class="event-container"> 
      Old event info goes here 
     </div> 
    </div> 
</div> 

<div class="event"> 
    <div class="event-container"> 
     New event info goes here 
    </div> 
</div> 

<div class="event"> 
    <div class="event-container"> 
     New event info goes here 
    </div> 
</div> 

Answer 2

我想如果你過期的元素destroy會更好。並且在銷燬元素之前追加這個div#openclose

var eventDiv = '<div class="event"><div class="event-container">'+expired.innerHTML+'</div></div>'; 

var opencloseContainer = document.getElementByClassName("openclose"); 

opencloseContainer.innerHTML += eventDiv;