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

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>

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

我知道我可以使用 appendTo 来移动元素，但我不知道如何 select 仅具有比当前服务器日期更旧的日期属性的元素。

非常感谢任何建议！

Answer 1

您可以迭代元素并使用 .filter() method 到 return 元素，其 data-event-date 属性值比特定值 greater/less。

然后您将链接 .appendTo() method 以附加 returned 元素。

Example Here

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

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

Select elements with data-attribute date value older than current server date

javascript

jquery

date

custom-data-attribute