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")。

按日期排序数据属性

1 个答案:

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