如何按内容日期对div进行排序

Question

我正在尝试按内容日期排序div...我已经实现了排序，但不是按日期排序...

HTML

 <div id="all_elements">

            <!-- one element -->
            <div class="element">
                    <div class="display-number">02</div>
                    <div class="year">20-10-2011</div>
            </div><!-- element -->

            <!-- one element -->
            <div class="element">
                    <div class="display-number">03</div>
                    <div class="year">22-09-2011</div>
            </div><!-- element -->

            <!-- one element -->
            <div class="element">
                    <div class="display-number">01</div>
                    <div class="year">01-12-2011</div>
            </div><!-- element -->

            <!-- one element -->
            <div class="element">
                    <div class="display-number">04</div>
                    <div class="year">01-06-2011</div>
            </div><!-- element -->

            <!-- one element -->
            <div class="element">
                    <div class="display-number">05</div>
                    <div class="year">01-06-2010</div>
            </div><!-- element -->

        </div> <!--all_elements-->

JQUERY

<script>
        function sortDescending(a, b) {
            return $(a).find(".year").text() < $(b).find(".year").text() ? 1 : -1;
        };
        $(document).ready(function() {
            $('#all_elements .element').sort(sortDescending).appendTo('#all_elements');
        }); 
    </script>

我知道我需要一个函数来确定内容是否为日期，只是不知道怎么做...

谁能帮帮我？

- ronni

---

请参见：http://stackoverflow.com/questions/1308720/javascript-wont-parse-gmt-date-time-format 在日期格式方面，JavaScript 不太宽容。 - Candide

Answer 1

你可以这么做：

   function sortDescending(a, b) {
     var date1  = $(a).find(".year").text();
       date1 = date1.split('-');
     date1 = new Date(date1[2], date1[1] -1, date1[0]);
     var date2  = $(b).find(".year").text();
       date2= date2.split('-');
     date2= new Date(date2[2], date2[1] -1, date2[0]);

     return date1 < date2 ? 1 : -1;
    };
    $(document).ready(function() {
        $('#all_elements .element').sort(sortDescending).appendTo('#all_elements');
    }); 

编辑 - 根据评论更正了拼写错误！这里是Fiddle http://jsfiddle.net/TsZeg/

- Nicola Peluchetti

---

+1，我为您制作了这个：http://jsfiddle.net/TsZeg/，并且您在第二个日期中有一个拼写错误，应该是$(b)而不是$(a)。 - Joe

谢谢您提供的代码示例和指出的笔误！ :) - Nicola Peluchetti

如果要支持日期和时间，需要做哪些更改？ - Mike

抱歉，答案很简单，只需将时间加到新日期即可。 - Mike

要进行升序排序，请使用 return date1 > date2 ? 1 : -1; - Ionut Necula

Answer 2

使用我的 jQuery 插件 SortContent：

$('#all_elements').sortContent({asc:true})

但是，由于您的排序基于字符串（日期）之外的某些内容，因此应使用format回调函数。而且，由于日期不是要排序的所有HTML元素，因此应使用helper回调函数来识别合适的内容。

$('div#all_elements').sortContent({format:parser,helper:myhelper})

所需回调函数：

parser=function(content){
    content=content.split('-');
    //Convert 20-10-2011 to 10/20/2011 to be ready to Date parsing
    content=content[1]+'/'+content[0]+'/'+content[2]
    return Date.parse(content)
};
myhelper=function(e){
   return $('.year',$(e)).html();
}

演示：

http://jsfiddle.net/abdennour/E4Hbp/8/

- Abdennour TOUMI

Answer 3

你尝试过使用日期对象吗：new Date($('.year').text())？

- greener

---

好的，如果你的电脑知道你正在处理非美国日期格式，那么是的。 - Blazemonger

必须精确地塞进去。 - greener