Question

我有一个这样的清单：

<ul>
 <li><span class="date">2011 05 01</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">2010 02 01</span><p>Text...</p></li>
</ul>

我需要jQuery按年和月分组项目，如下所示：

<ul>
 <li class="year">2011
  <ul>
   <li class="month>May
    <ul>
     <li class="item"><span class="date">2011 05 01</span><p>Text...</p></li>
     <li class="item"><span class="date">2011 05 01</span><p>Text...</p></li>
    </ul>
   </li>
   <li class="month>April
    <ul>
     <li class="item"><span class="date">2011 04 01</span><p>Text...</p></li>
     <li class="item"><span class="date">2011 04 01</span><p>Text...</p></li>
    </ul>
   </li>
  </ul>
 </li>
 <li class="year">2010
  <ul>
   <li class="month>March
    <ul>
     <li class="item"><span class="date">2011 03 01</span><p>Text...</p></li>
    </ul>
   </li>
   <li class="month>February
    <ul>
     <li class="item"><span class="date">2011 02 01</span><p>Text...</p></li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

感谢。

Answer 1

我写了一个评论解决方案here (jsFiddle)和here (jsBin)。

（这两个链接的内容相同，但jsFiddle有时候很慢，所以你可能想转到jsBin）

希望你会喜欢它！

HTML

<ul id="mainList">
    <li><span class="date">2011 05 01</span><p>Text...</p></li>
    <li><span class="date">2011 12 01</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">2010 02 01</span><p>Text...</p></li>
</ul>

JAVASCRIPT

// Month number to string
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];

// 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");
    });
});

Answer 2

这是example of sorting alphabetically。我认为这将是一个很好的起点。希望这有帮助！

使用jQuery对列表项进行分组

2 个答案:

HTML

JAVASCRIPT