ग्रुप आईडी द्वारा मूल आईडी द्वारा उल ली एचटीएमएल

Question

मेरे पास xml सूची है जो मैं उन्हें HTML ul li में परिवर्तित करना चाहता हूं और उन्हें प्रत्येक आइटम में वर्णित मूल आईडी द्वारा समूहित करना चाहता हूं।

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

आउटपुट इस तरह दिखना चाहिए। मुझे उपरोक्त दिए गए एक्सएमएल को उल और ली में बनाने के लिए उपयोग करना होगा।

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

मैं यह कैसे कर सकता हूं? क्या मुझे रैप के साथ .च लूप का उपयोग करना चाहिए? क्या कोई मदद कर सकता है?

यहां कुछ ऐसा है जो मैंने कोशिश की है।

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

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