-1

我一直在尝试通过 jQuery 中的升序/降序对日期进行排序,但没有运气。知道出了什么问题吗?这是我的代码:http: //jsfiddle.net/UdwNh/

 var itemsArray = $('div#activity_box');
    itemsArray.sort(function(a,b){
        var aTime = new Date($(a).find('#activity_date').text()).getTime();
        var bTime = new Date($(b).find('#activity_date').text()).getTime();
        return aTime - bTime;
    });

    $('#sortAsc').click(function(){
        $("#wrapper").empty();
        $(itemsArray).each(function(){
            $("#wrapper").prepend($(this));
        });
    });

    $('#sortDesc').click(function(){
        $("#wrapper").empty();
        $(itemsArray).each(function(){
            $("#wrapper").append($(this));
        });
    });​

相关HTML:

<input class="btn" type="button" value="Sort Ascending" id="sortAsc"/>
<input class="btn" type="button" value="Sort Descending" id="sortDesc"/>

<div id="wrapper">
    <ul>
    <li class='item'><div id='activity_date'>01/10/2012</div>
    <div id='activity_box'>
    <div id='activity_text' class='windowClass2'>...text here...</div>
    </div></li><li class='item'><div id='activity_date'>04/10/2012</div>
    <div id='activity_box'>
    <div id='activity_text' class='windowClass2'>...text here...</div>
    </div></li><li class='item'><div id='activity_date'>10/10/2012</div>
    <div id='activity_box'>
    <div id='activity_text' class='windowClass2'>...text here...</div>
    </div></li><li class='item'><div id='activity_date'>16/10/2012</div>
    <div id='activity_box'>
    <div id='activity_text' class='windowClass2'>...text here...</div>
    </div></li>
    </ul>
</div>
4

1 回答 1

2

该代码有几个问题。

  1. id在多个元素上使用相同的值。id值在页面上必须是唯一的

    要修复它,请改用类值,或data-*属性,或允许在页面上多次出现的任何其他内容。

  2. 您正在调用sort一个 jQuery 实例。jQuery没有记录sort功能。它可能有一个无证的,但如果是这样,你不知道它做了什么。假设它会重新排列 DOM 元素当然是没有意义的。

    要修复它,您必须为此编写自己的函数(这并不复杂),或者找到一个为您完成它的插件。

  3. 即使sort确实有效,您传入的日期字符串也采用,等new Date(string)形式。这不是记录在案以便理解的格式。记录在案的唯一要理解的字符串格式是ISO-8601的简化形式,它看起来不像那样。事实上,在 Chrome 和其他浏览器上都失败了。20/10/201217/10/2012new Date(string)new Date(string)new Date("20/10/2012")

    要修复它,您需要以另一种方式获取日期。您可以将元素上的毫秒以来的时间值存储为data-*属性,然后直接使用它。或者您可以解析自己拥有的日期字符串。如果它们始终采用这种dd/mm/yyyy格式,则将各个部分解析为数字是微不足道的,然后您可以将年、月和日的结果数字传递到new Date(year, month, date). (请记住,月份从0= 一月开始。)

  4. 你在</li>一开始就关闭了,没有开口<li>

    要修复它,请不要这样做。:-)

于 2012-11-07T23:53:11.453 回答