将两个日期与从 HTML5 数据中提取的 javascript 进行比较答案

【问题标题】：compare two dates with javascript extracted from HTML5 data将两个日期与从 HTML5 数据中提取的 javascript 进行比较
【发布时间】：2013-07-01 19:30:06
【问题描述】：

我有一个数组，需要在显示前进行排序。有一个代码如何创建我的数组

    for ( $i = 0, $count = count( $notifications ); $i < $count; ++$i ) {
        $alt = ( 0 == $counter % 2 ) ? ' class="alt"' : ''; ?>
        <script>
        array[i] = '<li><?php echo addslashes($notifications[$i]);?></li>';
        i++;
        </script>
        <?php $counter++;
    }

?>

这是每个循环的样子：

<li><a data-date="2013-06-16 11:44:50" href="http://example.com/url/">text!</a></li>

现在我需要按 data-date 属性对这个数组进行排序。

这就是我已经走了多远，但没有成功。

var joint = array.join("<br/>");    
aka = jQuery(joint).find('a').sort(function (a, b) {
    return '<li>' +a.getAttribute('data-date') - +b.getAttribute('data-date') + '</li>';
})

【问题讨论】：

为什么不使用实际的 JavaScript 数组而不是 DOM 元素来表示数据？
创建大量<script> 标签是一个非常糟糕的主意。为什么不用 PHP 创建一个格式良好的 JSON 字符串并将其传递给 JavaScript？
这个数据来自不同的函数。在 wordpress 中 $notifications 被称为 $notifications = bp_core_get_notifications_for_user( bp_loggedin_user_id() ) 我可以在这个脚本中的 JS 中表示它吗？我正在考虑做类似的事情，但坚持使用多维数组..排序会变得非常痛苦
@Blender 是的，最后我会很好地重写它））所以我不会重复使用
@Mpa4Hu 我已经发布了一个关于如何根据数据日期重新排序列表的解决方案。

标签： javascript arrays html sorting

【解决方案1】：

有两种解决方案，一种使用javascript，一种使用PHP。

纯 Javascript 解决方案：

以下是如何根据 data-date 属性对<li> 进行排序。

我已经包含了基于日期和基于字符串的排序。

JSFiddle：http://jsfiddle.net/xZaeu/

<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<body>

<ul id="ulList">
<li><a data-date="2013-09-16 11:44:50" href="http://example.com/url/">09!</a></li>
<li><a data-date="2013-08-16 11:44:50" href="http://example.com/url/">08!</a></li>
<li><a data-date="2013-07-16 11:44:50" href="http://example.com/url/">07!</a></li>
<li><a data-date="2013-11-16 11:44:50" href="http://example.com/url/">11!</a></li>
<li><a data-date="2013-10-16 11:44:50" href="http://example.com/url/">10!</a></li>
<li><a data-date="2013-06-16 11:44:50" href="http://example.com/url/">06!</a></li>
</ul>

<script>

function compareDataDates(a,b)
{
    var match = a.match(/^(\d+)-(\d+)-(\d+) (\d+)\:(\d+)\:(\d+)$/);
    var date1 = new Date(match[1], match[2] - 1, match[3], match[4], match[5], match[6]);

    match = b.match(/^(\d+)-(\d+)-(\d+) (\d+)\:(\d+)\:(\d+)$/);
    var date2 = new Date(match[1], match[2] - 1, match[3], match[4], match[5], match[6])

    return date1 - date2;
}

var list = $('#ulList');
var listItems = list.find('li').sort(function (a, b) {
        return compareDataDates($(a).find('a').eq(0).attr("data-date"), $(b).find('a').eq(0).attr("data-date"));
        //return $(a).find('a').eq(0).attr("data-date").localeCompare($(b).find('a').eq(0).attr("data-date"));
    });
list.find('li').remove();
list.append(listItems);
</script>

</body>
</html>

自从您使用特定格式以来，字符串和日期比较都有效，尽管基于字符串的比较在您遇到以下情况时会失败：

<li><a data-date="2013-06-16 11:44:50" href="http://example.com/url/">06!</a></li>
<li><a data-date="2013-6-16 11:44:50" href="http://example.com/url/">6!</a></li>

参考文献使用：

纯 PHP 解决方案：

类似于...的东西

   <?php
    //Other PHP code here...
   $arrayForSorting = new array();

   foreach ($notifications as &$value) 
   {
      $temp = addslashes($value);
      array_push($arrayForSorting,"<li>".$temp."</li>");  
   }

   //Sort the array
   asort($arrayForSorting);

   foreach ($arrayForSorting as &$value) 
   {
     echo $value;
   }

   ?>

参考资料：

http://php.net/manual/en/array.sorting.php

【讨论】：

谢谢，成功了，我使用了基于字符串的 javascript 解决方案。最后一个问题，如何使它反向工作？ ))) 现在，它从最旧的日期开始到当前，我希望它从当前开始
把return改成return date2 - date1;就行了