Wrap affected divs with javascript

Question

Using moment.js I've written a script that goes through a list of events and hide those that started more than 6 hours ago and are considered finished.

    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";
        }
    }

The script works fine but completely hiding the divs isn't the best idea. I would instead like to wrap all of the expired events in a div that then can be opened if you still want to view them. How do I go about doing that?

The end result would be something like:

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

score 1 · Accepted Answer · answered Oct 17 '16 at 07:20

Replace your javascript by this

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]);
    }
}

This will append the event div to the oldEvents div with appendChild()

You can use an empty div inside your html that will be filled with time.

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

Ah, didn't think of appending them to an existing div. That worked perfectly. Thank you! — yayheartbeat, Oct 17 '16 at 07:47

score 0 · Answer 2 · edited May 23 '17 at 12:23

0

I guess it will be better if you destroy the expired element. And before destroying the element append this to div#openclose

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

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

opencloseContainer.innerHTML += eventDiv;

edited May 23 '17 at 12:23

Community

1
1

answered Oct 17 '16 at 07:30

Shubham Sinha

79
2
12

OP has already the event wrapped inside `event` and `event-container` classes. You should not rewrite them – Weedoze Oct 17 '16 at 07:34

Wrap affected divs with javascript

2 Answers2