用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;