选择数据属性日期值早于当前服务器日期的元素

Question

我有一个事件列表，每个事件都有一个包含日期的自定义数据属性：

<ul class="event-list">
    <li class="event-item" data-event-date="20150218"></li>
    <li class="event-item" data-event-date="20150522"></li>
    <li class="event-item" data-event-date="20150928"></li> 
</ul>
<ul class="old-event-list">
</ul>

我要做的是选择ul.event-list中数据事件日期属性早于当前（服务器时间）日期的所有li.event-item元素，然后将它们移动到ul.old-event-list。

我知道我可以使用appendTo来移动元素，但我不知道如何只选择日期属性比当前服务器日期旧的元素。

非常感谢任何建议！

Answer 1

您可以对元素进行迭代，并使用.filter()方法返回data-event-date属性值大于/小于某个值的元素。

然后，您将链接.appendTo()方法，以便附加返回的元素。

此处示例

$('.event-list .event-item[data-event-date]').filter(function () {
    return $(this).data('event-date') > 20150522;
}).appendTo('.old-event-list');

当然，您可以在JS中动态检索当前日期，而不是硬编码。

Answer 2

如果您可以使用Date对象能够理解的日期格式，那么您可以很容易地这样做：

$(function () {
    var now = new Date();
    var old = $(".old-event-list");
    $(".event-list .event-item").each(function () {
        var date = new Date($(this).data("event-date"));
        if (date < now) {
            $(this).appendTo(old);
        }
    });
});

如何解析格式为20150522的日期本身就是一个问题。只使用Javascript能够理解的格式（例如2015-05-22）会容易得多。在PHP中，它将是date('Y-m-d', $time)。

Answer 3

尝试

$("[data-event-date^=2015]").map(function(i, el) {
  return Number($(el).data("event-date")) > (new Date()).toJSON()
           .replace(/[^d]/g, "").slice(0, 8) 
         ? $(".old-event-list").append(el) : null
});

$("[data-event-date^=2015]").map(function(i, el) {
  return Number($(el).data("event-date")) > (new Date()).toJSON().replace(/[^d]/g, "").slice(0, 8) ? $(".old-event-list").append(el) : null
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="event-list">
  old list
    <li class="event-item" data-event-date="20150218">old</li>
    <li class="event-item" data-event-date="20150522">new</li>
    <li class="event-item" data-event-date="20150928">new</li> 
</ul>
<ul class="old-event-list">
new list
</ul>

Answer 4

尝试以下代码

function pad(number, length) {//small function to pad a number with leading zeros
    var str = '' + number;
    while (str.length < length) {
    str = '0' + str;
    }
    return str;
    }
    $('.event-item').each(function() {
        var edate = $(this).attr('data-event-date'); // get the value from data-event-date attribute
        var fdate = new Date();
        var year = fdate.getFullYear();
        var month = fdate.getMonth();
        var day = fdate.getDate();
        var now = year;
        if(day<=9) {
           now += pad(day,2);
        }
        if(month<=9) {
           now += pad(month,2);
        }
        if(now>edate) {
           $('.old-event-list').html('<li class="event-item">'+$(this).text()+'</li>'); // put the old dates in old eventList
            $(this).remove(); // remove item from current list
        }
    });

FIDDLE

http://jsfiddle.net/8coakc37/1/