用jQuery对结果进行分组

Question

我有一个像HTML一样的列表;

<ul> 
    <li data="foo">a</li> 
    <li data="foo">b</li> 
    <li data="bar">c</li> 
    <li data="foo">d</li> 
</ul> 

，我想隐藏这个UL和创建另一个哪个输出是这样的;

<div> 
    <h1>foo</h1> 
    <ul> 
     <li>a</li> 
     <li>b</li> 
     <li>d</li> 
    </ul> 
</div> 
<div> 
    <h1>bar</h1> 
    <ul> 
     <li>c</li> 
    </ul> 
</div> 

我该如何处理jQuery？

谢谢。

Answer 1

如果你正在寻找一个JavaScript的解决方案，然后尝试

var map = {}; 
$('ul li').each(function() { 
    var data = $(this).attr('data'), 
     array = map[data] = map[data] || []; 
    array.push(this); 
}); 
$('ul').remove() 

var $ct = $('body'); 
$.each(map, function (key, item) { 
    var $item = $('<div><h1>' + key + '</h1><ul></ul></div>'); 
    $item.find('ul').append(item); 
    $item.appendTo($ct) 
}) 

演示：Fiddle