如何循环遍历元素及其子元素以添加或删除类 - Javascript / jQuery

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

});