Nhóm xml theo id mẹ vào ul li html

Question

Tôi có danh sách xml mà tôi muốn chuyển đổi chúng thành li li html và nhóm chúng theo id mẹ được nêu trong mỗi mục.

<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> 

Kết quả sẽ trông như thế này. Tôi sẽ phải sử dụng xml đã cho ở trên để tạo thành ul và 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> 

Tôi làm như thế nào? Tôi có nên sử dụng vòng lặp .each với wrapall không? Ai đó có thể giúp đỡ?

Đây là điều tôi đã thử.

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

Tôi vừa cập nhật js để nhóm các mục theo danh mục.

js Cập nhật

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