如何解决用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\");
});
});
,这是按字母顺序排序的示例。我认为这将是一个不错的起点。希望这可以帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。