Question

我有一个事件列表–我只想显示过去的事件。为此，我想遍历这些元素，找到包含日期的div，然后将其与今天的当前日期进行比较。

这些事件的基本结构如下：

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

我使用Moment.js解析日期。到目前为止，我已经为此使用了jQuery（我通常不这样做），但是无论如何它都托管在Wordpress网站上，因此jQuery已经可用。我很高兴听到任何解决方案，而不仅仅是与jQuery相关的解决方案。

这是我代码简化版的JSFiddle。布局方式上，前两个元素应该隐藏，后两个元素应该是蓝色（我添加了一个“蓝色”类，以便在代码无法正常工作时更加清楚）

https://jsfiddle.net/ngpvkscf/

Answer 1

这里有几个问题：

您正在尝试将event_date创建为矩对象，但您正在传递自身的值而不是event_date_raw
结果日期将是一个矩对象和一个字符串。为了进行比较，您需要均衡类型。我建议使用普通的Date对象，因此您需要立即调用.toDate()并使用new Date()来获取当前日期时间。
您需要使用find()来获取当前.event-date中的.past-event元素。您当前的逻辑仅适用于第一个逻辑。

在解决这些问题后，它可以正常工作：

$('.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

我相信以下是您想要的：

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

将日期与moment.js进行比较有点不同，只是大于或小于运算符。

我正在使用moment(event_date).isAfter(now)

这将为您提供正确的比较。

另外，通过使用jQuery('.event-date').text();，您将获得与.event-date匹配的所有元素，所以我改为执行类似jQuery(this).children('.event-date').text();的操作，该操作采用当前元素并检查子元素的子元素。该查询选择器的当前元素。

Answer 3

这是您可能需要的

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

});

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

3 个答案: