用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