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>

我该怎么做？我应该使用.each循环与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

将父ID的xml分组到ul li html中

1 个答案: