jQuery如果发布日期早于今天，则将其移至另一个div

Question

I have an events page with two divs, one that holds upcoming events and another that holds past events.

I would like a script that automatically checks the date of each event in the upcoming events div and if any event's date is in the past (before TODAY) then it should automatically move that event to the past events div.

My markup is something like:

<div class="all-events">

    <div class="upcoming-events">
        <div class="event">
            <p class="event-date"></p>
            .
            .
            .

        </div>
    </div>
    <div class="past-events">
        <div class="event">
            <p class="event-date"></p>
            .
            .
            .

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

I want the script to

After some research I found this code to compare two things using javascript:

<script>
 var date = document.getElementById("inputDate").value;
var varDate = new Date(date); //dd-mm-YYYY
var today = new Date();
today.setHours(0,0,0,0);

if(varDate >= today) {
    alert("Working!");  
}

</script>

But I am not sure if this might help in my case.

Thanks

Answer 1

You should not move events from upcoming to past, instead you should add them directly to the past div if they were created in the past.

This should do it:

var postDateInput = $('.event-date').text();
var postDate = new Date(postDateInput);
var todayDate = new Date();
todayDate.setHours(0,0,0,0);

if(postDate < todayDate) {
  // past events
}

Answer 2

I'm a beginner but I want to try:

var eventdates = document.querySelectorAll(".event-date");
var today = new Date();
today.setHours(0,0,0,0);

// Loop of all event dates
for (var i = 0; i < eventdates.length; i++) {
  var varDate = new Date(eventdates[i].textContent); 

  // Compare date
  if(varDate < today) {

    //Get Parent node of each <p class="event-date">...</p>
    var event = eventdates[i].parentNode;

    // Get the node index of <div class="events" when moving to upcoming events
    var event_index = [].indexOf.call(event.parentNode.children, event);

    // Get upcoming events container                                  
    var upcoming_events = document.querySelector(".upcoming-events");

    // Get past events container
    var past_events = document.querySelector(".past-events");

    // move the <div class="events" with node index to upcoming events 
    upcoming_events.appendChild(past_events.childNodes[event_index]);
  }
}

Tell me if this works. Thank you.