Question

我找到了一个jquery解决方案来排序日期：

   <ul id="mainList">
        <li><span class="date">2012 05 01</span><p>Text...</p></li>
        <li><span class="date">2011 05 02</span><p>Text...</p></li>
        <li><span class="date">2011 05 01</span><p>Text...</p></li>
        <li><span class="date">2011 04 01</span><p>Text...</p></li>
        <li><span class="date">2011 04 01</span><p>Text...</p></li>
        <li><span class="date">2010 03 01</span><p>Text...</p></li>
        <li><span class="date">2009 02 01</span><p>Text...</p></li>
    </ul>

和脚本：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js"></script>

<script type='text/javascript'>
$(window).load(function(){
// Month number to string
        var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];

// Sorting the <li> by year
$("#mainList li").sort(function(a,b) {
    var yearA = $(a).children("span").text().split(" ")[0],
        yearB = $(b).children("span").text().split(" ")[0];
    return yearA < yearB;
}).appendTo($("#mainList"));

// Grouping the <li> by year
$("#mainList li").each(function() {
    var year = $(this).children("span").text().split(" ")[0];
    // If the grouping <li> doesn't exist, create it
    if ($("#mainList li.year." + year).length === 0) {
        $("#mainList").append($('<li class="year ' + year + '">' + year + '<ul></ul></li>'));
    }
    // Add the current <li> to the corresponding grouping <li>
    $(this).appendTo($("#mainList li.year." + year + " ul"));
});

// Sorting the <li> by month inside each grouping <li>
$("#mainList li.year ul").each(function() {
    $(this).children("li").sort(function(a,b) {
        var monthA = $(a).children("span").text().split(" ")[1],
            monthB = $(b).children("span").text().split(" ")[1];
        return monthA < monthB;
    }).appendTo($(this));
});

// Grouping the <li> by month inside each grouping <li>
$("#mainList li.year ul").each(function() {
    $this = $(this);
    $this.children("li").each(function() {
        var month = $(this).children("span").text().split(" ")[1];
        // If the grouping <li> doesn't exist, create it
        if ($this.find("li.month." + month).length === 0) {
            $this.append($('<li class="month ' + month + '">' + months[month-1] + '<ul></ul></li>'));
        }
        // Add the current <li> to the corresponding grouping <li>
        $(this).appendTo($this.find("li.month." + month + " ul")).addClass("item");
    });
});





});

</script>

结果是：

2012
- 麦
  - 2012 05 01
  - 文本...
2011
- 麦
  - 2011 05 02
  - ...文本
  - 2011 05 02
  - 文本...
- 四月
  - 2011 04 01
  - ...文本
  - 2011 04 01
  - 文本...
2010
- 马兹
  - 2010 03 01
  - 文本...
2009
- Februar
  - 2009 02 01
  - 文本...

我尝试在代码中进行更改，但它无法解决问题。所以实际上我不需要“年度组”。我只需要月份组，但落后一年。结果应该最终看起来像这样：

Mai 2012
- 2012 05 01
- 文本...
Mai 2011
- 2011 05 02
- ...文本
- 2011 05 02
- 文本...
2011年4月
- 2011 04 01
- ...文本
- 2011 04 01
- 文本...
März2010
- 2010 03 01
- 文本...
Februar 2009
- 2009 02 01
- 文本...

我尝试删除当年的代码并更改了当月的代码：

 $this.append($('<li class="month ' + month + '">' + months[month-1] + year +'<ul></ul></li>'));

但我尝试的一切都很难达到我希望的结果。

Answer 1

试试这个。我没有使用您正在使用的解决方案，并决定从头开始。实施非常简单直接。我不会说这是最好的方法，但应该做你需要的工作。

    var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];

$('#mainList li').each(function()
{
  var yearAppended = false;
  $('#mainList li').each(function()
  {
     var current = $(this);
     var next = $(this).next('li');
     if(next != undefined)
     {
        var currArr = current.find('span').text().split(' ');
        var nextArr = next.find('span').text().split(' ');  
        if(nextArr[0] > currArr[0]) // year comparison
        {
          current.insertAfter(next);   
        }   
        else if(nextArr[0] >= currArr[0] && nextArr[1] > currArr[1]) // month comparison
        {
           current.insertAfter(next);
        }
        else if(nextArr[0] >= currArr[0] && nextArr[1] >= currArr[1] && nextArr[2] > currArr[2]) // day comparison
        {
           current.insertAfter(next);
        } 
      }
  });
});

var currentYear = "";
var currentMonth = "";
$('#mainList li').each(function()
  {      

        var current = $(this);
        var currArr = current.find('span').text().split(' ');
        var monthIndex = currArr[1].length > 2 ? currArr[1] : currArr[1].substring(1,2);
        monthIndex--;
        if(currentYear == "" || currentYear != currArr[0])
        {     
            currentYear = currArr[0];
            currentMonth = currArr[1];
            current.wrap('<li>' + months[monthIndex] + " " + currArr[0] + '</li>');
        }
        else if(currentMonth == "" || currentMonth != currArr[1])
        {    
            currentMonth = currArr[1];            
            current.wrap('<li>' + months[monthIndex] + " " + currArr[0] + '</li>');
        }
  });

工作示例：https://jsfiddle.net/08qyom1a/3/

如何使用jquery按日期和年份对日期进行分组？

1 个答案: