ul liに親IDでxmlをグループ化する

Question

私はxmlリストを持っています。これをhtml ul liに変換し、各項目に記載されている親IDでグループ化したいと考えています。

<list> 
<item> 
    <id>1</id> 
    <ParentID>100</ParentID> 
    <Seq>1</Seq> 
</item> 
<item> 
    <id>2</id> 
    <ParentID>100</ParentID> 
    <Seq>2</Seq> 
</item> 
<item> 
    <id>3</id> 
    <ParentID>200</ParentID> 
    <Seq>5</Seq> 
</item> 
<item> 
    <id>4</id> 
    <ParentID>100</ParentID> 
    <Seq>3</Seq> 
</item> 
<item> 
    <id>5</id> 
    <ParentID>100</ParentID> 
    <Seq>4</Seq> 
</item> 
<item> 
    <id>6</id> 
    <ParentID>200</ParentID> 
    <Seq>1</Seq> 
</item> 
<item> 
    <id>7</id> 
    <ParentID>200</ParentID> 
    <Seq>2</Seq> 
    </item> 
<item> 
    <id>8</id> 
    <ParentID>200</ParentID> 
    <Seq>4</Seq> 
</item> 
<item> 
    <id>9</id> 
    <ParentID>200</ParentID> 
    <Seq>3</Seq> 
</item> 
<item> 
    <id>10</id> 
    <ParentID>200</ParentID> 
    <Seq>6</Seq> 
</item> 
</list> 

出力は次のようになります。私は上記のxmlを使ってulとliにする必要があります。

<ul> 
<li id="item-100" parentid="100"> 
    <h4>Item 100</h4> 
    <ul class="sortConn"> 
     <li id="item-1" class="ui-state-default">Item 1</li> 
     <li id="item-2" class="ui-state-default">Item 2</li> 
     <li id="item-4" class="ui-state-default">Item 4</li> 
     <li id="item-5" class="ui-state-default">Item 5</li> 
    </ul> 
</li>  
</ul> 

<ul> 
<li id="item-200" parentid="200"> 
    <h4>Item 200</h4> 
    <ul class="sortConn"> 
     <li id="item-3" class="ui-state-default">Item 3</li> 
     <li id="item-6" class="ui-state-default">Item 6</li> 
     <li id="item-7" class="ui-state-default">Item 7</li> 
     <li id="item-8" class="ui-state-default">Item 8</li> 
     <li id="item-9" class="ui-state-default">Item 9</li> 
     <li id="item-10" class="ui-state-default">Item 10</li> 
    </ul> 
</li>  
</ul> 

どうすればいいですか？私はwrapallで各ループを使うべきですか？助けてもらえますか？

ここに私が試したことがあります。

var $ul = $('<ul></ul>'), $li = $('<li></li>'); 

var $ulc, $lic; 

$ulc = $ul.clone(); 
// 
var group = {}, pid; 
// 
$('item', output).each(function (idx, elm) { 
    pid = $('ParentID', elm).text(); 
    // 
    if (group.hasOwnProperty(pid)) { 
     group[pid] += 1; 
    } 
    else { 
     group[pid] = 1; 
    } 

    $ulc = $ul.clone(); 

    $lic = $li.clone(); 
    $lic.addClass('ui-state-default'); 
    $lic.attr('id', 'item-' + pid); 
    $lic.append('Item ' + pid); //title of the sitemap 

    $ulc.append($lic); 

    $('#result').append($ulc);    
}); 

Answer 1

カテゴリごとに項目をグループ化するようにjsを更新しました。

更新JS

xml = $.parseXML(xml); 
var _html = ''; 
var category = []; 
var categoryName; 

$(xml).find('item').each(function(){ 
    var _parent = $(this).find('ParentID').html(); 

    if(category[_parent] != undefined){ 
     category[_parent].push((this)); 
    }else { 
     category[_parent] = []; 
     category[_parent].push((this)); 
    } 
}); 

categoryName = Object.keys(category); 

_html += '<ul>'; 
console.log(categoryName.length); 
for(var i = 0; i<categoryName.length; i++){ 
    var sCategory = category[categoryName[i]]; 
    var sCategoryName = categoryName[i]; 

    _html+= '<li id="item-'+ sCategoryName +'" parentid="'+ sCategoryName +'">'; 
    _html+= '<h4>Item '+ sCategoryName +'</h4>' 
    _html+= '<ul class="sortConn">'; 
    for(var j = 0; j<sCategory.length; j++){ 
     _html+= '<li id="item-' + $(sCategory[j]).find('id').html() +'" class="ui-state-default">Item '+ $(sCategory[j]).find('id').html() +'</li>' 
    } 
    _html+= '</ul>'; 
    _html+= '</li>'; 
} 
_html += '</ul>'; 
$('#result').html(_html); 

Working Demo using your XML