用jQuery分组列表项

问题描述

| 我有一个这样的清单：

<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>

谢谢。     

解决方法

我在这里（jsFiddle）和这里（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\");
    });
});

    ,这是按字母顺序排序的示例。我认为这将是一个不错的起点。希望这可以帮助！