javascript - 按日期和数据属性排序

Question

好吧，我的目标是在这个网站上显示大量帖子，并且它们是从服务器检索的，该服务器以不按日期的方式组织它们，但我想按日期组织它们。

所以，目前我的网站上正在发生类似的事情:

  <div class="col-md-6" id="listing1">
    <div class="col-sm-12">
        <div class="thumbnail">
            <img src="http://i.imgur.com/f7rJAZ7.gif">
            <div class="caption">
              <h5 class="pull-right">Posted <span class="date" data-date="1402700296">2014-06-13 5PM</span></h5>
            </div>
        </div>
    </div>

    <div class="col-sm-12">
        <div class="thumbnail">
            <img src="http://i.imgur.com/8af2eJX.gif">
            <div class="caption">
              <h5 class="pull-right">Posted <span class="date" data-date="1402696287">2014-06-13 4PM</span></h5>
            </div>
        </div>
    </div>

    <div class="col-sm-12">
        <div class="thumbnail">
            <img src="http://i.imgur.com/uaJdSdx.jpg">
            <div class="caption">
              <h5 class="pull-right">Posted <span class="date" data-date="1402673458">2014-06-13 10AM</span></h5>
            </div>
        </div>
    </div>
  </div>

我在文档底部放置了这个 JQuery，试图对这些帖子进行处理和排序，但它似乎根本没有做任何事情，因为它让它们保持原样

$("#listing1 .col-sm-12").sort(function(a,b){
  return new Date($(a + " .thumbnail .caption .pull-right .date").attr("data-date")) > new Date($(b + " .thumbnail .caption .pull-right .date").attr("data-date"));
}).each(function(){
  $("#listing1").prepend(this);
})

我有最新版本的 JQuery，一切都是最新的。绝对，除了日期排序之外，其他所有内容都有效 - 一旦我开始包含来自第二个来源的这些帖子，这将非常重要，并且以不按日期且与第一个来源的排序不同的方式对它们进行排序。

我知道我的嵌套有点疯狂，但这是我在 Bootstrap 3 中发现的最好看的东西，我的同志们都不希望它改变。

Answer 1

您可以简化脚本:

$("#listing1 .col-sm-12").sort(function (a, b) {
    return new Date($(".date", a).data("date")) - new Date($(".date", b).data("date"));
}).appendTo("#listing1");

$(".date", a) 部分相当于 $(a).find(".date")。

演示:http://jsfiddle.net/Z26zM/1/