使用jQuery对列表项进行分组

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

我在这里写了一个注释解决方案(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");
    });
});