How to loop through elements and their sub elements in order add or remove classes — 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/

Now is string, event_date is object - just console log this and you can see the solution on your own. — Zydnar, Apr 03 '19 at 13:27
Your formatting the dates into strings. That's for human consumption. Compare the dates in JS notation: https://stackoverflow.com/questions/492994/compare-two-dates-with-javascript — random_user_name, Apr 03 '19 at 13:28
@cale_b or since using moment already it has methods like `isBefore()` — charlietfl, Apr 03 '19 at 13:31

score 3 · Accepted Answer · answered Apr 03 '19 at 13:26

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>

Cristian C. · Answer 2 · 2019-04-03T16:47:54.003

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.

Copy the relevant bits of code to your answer, so that when that fiddle disappears, this answer still has value to future visitors. — random_user_name, Apr 03 '19 at 16:46
@cale_b thanks. Edited the answer to include the JS code in its entirety, with the explanation beneath. — Cristian C., Apr 03 '19 at 16:48

score 0 · Answer 3 · answered Apr 03 '19 at 13:37

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

});

How to loop through elements and their sub elements in order add or remove classes — Javascript/jQuery

3 Answers3