Question

我有动物喂食时间列表，我想根据当前时间突出显示（css类）下一次即将喂食。

名单（缩短）：

<ul id="feedingTimes">
    <li><time value="1000">10:00</time> Uhr Humboldtpinguine</li>
    <li><time value="1000">10:00</time> Uhr Anakondas + Alligatoren</li>
    <li><time value="1100">11:00</time> Uhr Königspinguine</li>
    <li><time value="1130">11:30</time> Uhr Pelikane</li>           
</ul>

我会在这里粘贴一些JQuery，但到目前为止我还没有找到一个近乎可行的解决方案。它可能类似于“从列表中找到最接近当前时间的值然后添加类”。我不知道如何编码。

帮助会很棒，欢呼！

Answer 1

尝试这样的事情：

$('li').each(function() {
    if ($(this).find('time').attr('value') > (new Date().getHours() * 100) + new Date().getMinutes()) {
        $(this).addClass('next');
        return false;
    }
});

DEMO

Answer 2

调整qwertymk的好答案：

$('li').each(function() {
    var timeval = $(this).find('time').attr('value');
    if (timeval > (new Date().getHours() * 100) + new Date().getMinutes()) {
        $('li time[value="' + timeval + '"]').parent().addClass('next');
        return false;
    }
});

JQuery找到最近的元素值到当前时间然后addclass

2 个答案:

DEMO