This question already has an answer here:
这个问题在这里已有答案:
- Convert XML to HTML using jquery/javascript 1 answer
- 使用jquery / javascript 1回答将XML转换为HTML
I have an xml
list that I would want to convert them into html ul li and group them by the parent id stated in each item.
我有一个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>
The output should look like this. I will have to use the above given xml to form into ul and li.
输出应该如下所示。我将不得不使用上面给出的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>
How can I do that? Should I be using .each loop with wrapall? Can someone help?
我怎样才能做到这一点?我应该使用.each循环与wrapall?有人可以帮忙吗?
Here is something I have tried.
这是我尝试过的东西。
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);
});
1 个解决方案
#1
-1
I just updated js to group the items according to category.
我刚刚更新了js,根据类别对项目进行分组。
Updated 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);
使用您的XML进行演示演示
#1
-1
I just updated js to group the items according to category.
我刚刚更新了js,根据类别对项目进行分组。
Updated 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);
使用您的XML进行演示演示