查找数据属性大于日期值的第一个列表项

Question

我有一个具有日期数据属性的项目列表，格式为 "yy/mm/dd 00:00"

我要向该列表中添加一个列表项，但我需要在行中找到它的正确位置。因此，如果我有一个日期值为“2012/04/22 21:30”的项目，那么我需要找到日期值大于该日期值的第一个列表项，然后在它之前添加列表项。

所以我会有我的列表项

<li data-date="2010/04/05 20:40"></li>
<li data-date="2011/06/05 21:40"></li>
<li data-date="2012/08/05 22:40"></li>
<li data-date="2013/10/05"></li>

然后我需要将一个新的动态列表项插入到上面的列表中

<li data-date="2012/04/22 21:30"></li>

如何用 Jquery 解决这个问题？

Answer 1

我认为你应该这样处理需求，

调用所有节点，获取它们的值并存储在一个数组中。然后将所有日期时间值转换为秒。
根据您的要求重新排列 ASC/DESC 顺序。
再次将值转换为原始格式，封装具有 <li></li> 标记和其他属性的值。
用旧的替换新生成的 HTML。

我不确定这是否是最好的方法，但这是一个可行的解决方案。

Answer 2

您需要比较要插入的新 li 的属性 data-date 与 DOM 中已有的列表项。

$(function() {
  var c = 0;
  var a = '<li data-date="2011/06/05 21:40">2011/06/05 21:40</li>';
  var aa = Date.parse($(a).attr('data-date'));
  $('li').each(function(i, v) {
    var aaa = ($(v).attr('data-date'));
    var b = Date.parse(aaa);
    if (b > aa) {
      $(a).insertBefore(v);
      c = 1;
      return false;
    }
  })
  if (!c) {
    $('ul').append(a);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-date="2010/04/05 20:40">2010/04/05 20:40</li>
  <li data-date="2012/08/05 22:40">2012/08/05 22:40</li>
  <li data-date="2013/10/05 22:40">2013/10/05 22:40</li>
</ul>

查找数据属性大于日期值的第一个列表项

Find first list item with data attribute greater than a date value

jquery

custom-data-attribute