Question

我已经看过很多关于这个话题的问题，但我找不到适合我需要的东西。

以下是工作历史的示例，我需要按正确的顺序订购它们（下面的顺序正确）

<ul class="listitems">
    <li>March 2016 - Current</li>
    <li>October 2012 - February 2016</li>
    <li>January 2010 - September 2012</li>
    <li>October 2008 - December 2009</li>
</ul>

这些项目可以更改为类似的内容，但需要重新排序以显示与上面相同的内容：

<ul class="listitems">
    <li>March 2016 - Current</li>
    <li>October 2010 - February 2016</li>
    <li>January 2012 - September 2012</li>
    <li>October 2008 - December 2009</li>
</ul>

基本上，我需要在第一个月和第一年之前订购列表项目 - 这是否可能或者我是否有点拉伸？

修改

我通过将data-date属性添加到特定的listitem标记来尝试以下建议：

以下是我的一个列表项目：

<li id="employment_summaryitem1" class="list-group-item row" style="display:none">
                    <div class="col-xs-8">
                        <span id="employment_summary_text1"></span>
                    </div>
                    <div class="col-xs-offset-4">
                        <button id="btnDelete_employment_summary1" type="button" class="btn btn-xxs btn-danger pull-right glyphicon glyphicon-remove" style="font-size:x-small;position:relative"></button>
                        <button id="btnEdit_employment_summary1" type="button" class="btn btn-xxs btn-primary pull-right glyphicon glyphicon-pencil" style="font-size:x-small;margin-right:2px;position:relative"></button>
                    </div>
</li>

以下是我的JQuery：

var StartMonth1 = $('#ddljobstartmonth').val();
var StartYear1 = $('#ddlstartyear').val();

$('#employment_summaryitem1').attr('data-date', StartMonth1 + ' ' + StartYear1);

$("li").sort(function (a, b) {
            return new Date($(a).attr("data-date")) > new Date($(b).attr("data-date"));
        }).each(function () {
            $("ul").prepend(this);
        });

我有5个列表项基本上完全相同，只有差异是StartMonth 1和StartYear 1，它是StartMonth2和StartYear2等。

前端明智，似乎是在创建新的列表项，而不是对现有的列表项进行排序。我在这里错过了什么吗？

编辑2

我想出了我的问题（愚蠢的我!!）我将上述代码作为“记录”留给任何遇到同样问题的人。

它实际上并没有重新创建列表，它实际上是在我的页面上拾取所有列表（我有2个）并且正在更新两个（用这个排序列表覆盖我的其他列表）。下面是我的代码（我使用了类名）：

    $(".list-group-item").sort(function (a, b) {
        return new Date($(a).attr("data-date")) > new Date($(b).attr("data-date"));
    }).each(function () {
        $(".list-group").prepend(this);
    })

这样它会对特定列表（基于类名）进行排序，而不是所有列表。

感谢帮助人员!!

Answer 1

请通过添加数据属性来尝试您的代码。您可以在<li data-year="year-value">的数据属性中添加年/月值，这有助于排序。

Answer 2

使用sort()功能：

$("li").sort(function(a, b) {
  return new Date($(a).attr("data-date")) > new Date($(b).attr("data-date"));
}).each(function() {
  $("ul").prepend(this);
});

按日期构造函数按自定义属性data-*（在本例中我称之为data-date）对列表项进行排序。

完成此操作后，遍历每一个，同时将它们放回无序列表中。

JsFiddle demo

使用JQuery

2 个答案: