如何遍历元素及其子元素以顺序添加或删除类— Javascript / jQuery

Question

I have a list of events – I want to only show the ones that are in the past. To do this I was thinking to loop though these elements, find the containing div with the date, and then compare this to todays current date.

A basic structure of these events is as follows:

<div class="past-event">

  <span class="event-title">Event 1</span>
  <span class="event-date">05.05.19</span>

</div>

<div class="past-event">

  <span class="event-title">Event 2</span>
  <span class="event-date">20.04.19</span>

</div>

I've used Moment.js to parse the dates. I've used jQuery for this so far (I usually try not to) but this is hosted on a Wordpress site anyway so jQuery is already available. I'm happy to hear any solution and not just a jQuery related one.

Here is a JSFiddle of a simplified version of my code. The way its laid out, the first two elements should be hidden and the second two should be blue (I have added a "blue" class to make it clearer when the code is not working)

https://jsfiddle.net/ngpvkscf/

Answer 1

There's a couple of issues here:

• You're trying to create event_date as a moment object, yet you're passing the value of itself instead of event_date_raw
• The resulting dates will be a moment object and a string. For the comparison to work you need to equalise the types. I'd suggest using plain Date objects, so you need to call .toDate() in moment and use new Date() to get the current date time.
• You need to use find() to get the .event-date element within the current .past-event . Your current logic is only working with the first one.

With those issues fixed, it works:

 $('.past-event').each(function(i, obj) { var event_date_raw = $(this).find('.event-date').text(); var event_date = moment(event_date_raw, "DD.MM.YY").toDate(); var now = new Date(); if (now < event_date) { $(this).addClass("hidden"); } else { $(this).addClass("blue"); } }); 

 body { display: flex; width: 100%; flex-wrap: ; /* fix this too */ margin: 0; color: #EEE; } .past-event { width: 50%; display: flex; flex-direction: column; } .blue { background-color: blue; } .hidden { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script> <div class="past-event"> <span class="event-title">Event 1</span> <span class="event-date">05.05.19</span> </div> <div class="past-event"> <span class="event-title">Event 2</span> <span class="event-date">20.04.19</span> </div> <div class="past-event"> <span class="event-title">Event 3</span> <span class="event-date">01.02.19</span> </div> <div class="past-event"> <span class="event-title">Event 4</span> <span class="event-date">05.05.18</span> </div> 

Answer 2

I believe the following is what you want:

https://jsfiddle.net/4dehv2pj/

jQuery('.past-event').each(function(i, obj) {
  var event_date_raw = jQuery(this).children('.event-date').text();
  var event_date     = moment(event_date_raw, "DD/MM/YY");
  var now              = moment().format("DD/MM/YY");
console.log(event_date_raw);
  if (now < event_date) {
    jQuery(this).addClass("hidden");
  } else {
    jQuery(this).addClass("blue");
  }
});

Comparing dates with moment.js is a little bit different than just a greater than/less than operator.

I'm using moment(event_date).isAfter(now)

This will get you the correct comparison.

Also by using jQuery('.event-date').text(); you're getting ALL of the elements that match .event-date , so instead I do something like jQuery(this).children('.event-date').text(); , which takes the current element and checks the children of the current element for that query selector.

Answer 3

This is what you may need

    $('.event-date').each((index, item) => {
    var date = moment($(item).text(), 'DD.MM.YY').toDate();

    if (date > new Date()) {
        console.log(date)
        $(item).closest('.past-event').css('display', 'none');
    }

});