使用JavaScript在基于日期的列表中只隐藏一个项目

Question

我有一个日期列表:

<ul>
<li class="demo">2021-01-07</li>
<li class="demo">2021-03-23</li>
<li class="demo">2021-03-20</li>
<li class="demo">2021-05-20</li>
</ul>

我想要隐藏比今天日期更早的列表项。在本例中(今天是2021年2月12日)，它将是第一项。

这是我尝试的:

var expiretext = $(".demo").html();
var expire = new Date(expiretext);
var now = new Date();
if (now > expire) {
$(".demo").hide();
}

这隐藏了所有项。如何只隐藏日期已过的项目?

Answer 1

还可以阅读这里的JS日期格式，以便更精确，并在需要时应用额外的逻辑:

在JavaScript中将字符串转换为日期

和其他有用的信息:

在JavaScript中遍历一组元素的最佳方法是什么?

document.querySelectorAll("ul li.demo").forEach( li => {
let dat = new Date(li.innerText)
let currentdate = new Date();
if (dat < currentdate){li.style.display="none"}
});

<ul>
<li class="demo">2021-01-07</li>
<li class="demo">2021-03-23</li>
<li class="demo">2021-03-20</li>
<li class="demo">2021-05-20</li>
</ul>

Answer 2

当选择.demo时，它返回一个列表。你应该循环每一个

var now = new Date();
$(".demo").each((idx, ele) => {
let expire = new Date($(ele).text());
if (now > expire) {
$(ele).hide();
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="demo">2021-01-07</li>
<li class="demo">2021-03-23</li>
<li class="demo">2021-03-20</li>
<li class="demo">2021-05-20</li>
</ul>