jquery解析具有无限子级别类别的xml

I'm fairly new on parsing xml with jquery, so if my question looks like noobish, please forgive me.

我用jquery解析xml相当新,所以如果我的问题看起来像noobish,请原谅我。

I have an xml it contains my recursive categories. Some of them has sub categories, some of them not. It has some deep level categories under sub categories.

我有一个xml它包含我的递归类别。其中一些有子类别,有些没有。它在子类别下有一些深层次类别。

Sample of xml;

xml的样本;

<Urunler>
    <Urun>
        <ID>1</ID>
        <Parent>0</Parent>
        <Name>Red</Name>
    </Urun>
    <Urun>
        <ID>2</ID>
        <Parent>0</Parent>
        <Name>Green</Name>
    </Urun>
    <Urun>
        <ID>3</ID>
        <Parent>0</Parent>
        <Name>Blue</Name>
    </Urun>
    <Urun>
        <ID>4</ID>
        <Parent>3</Parent>
        <Name>Sky</Name>
    </Urun>
    <Urun>
        <ID>5</ID>
        <Parent>3</Parent>
        <Name>Sea</Name>
    </Urun>
    <Urun>
        <ID>6</ID>
        <Parent>5</Parent>
        <Name>Fish</Name>
    </Urun>
    <Urun>
        <ID>7</ID>
        <Parent>4</Parent>
        <Name>Bird</Name>
    </Urun>
</Urunler>

Desired HTML output

期望的HTML输出

<ul>
    <li>Red</li>
    <li>Green</li>
    <li>Blue
        <ul>
            <li>Sky
                <ul>
                    <li>Bird</li>
                </ul>
            </li>
            <li>Sea
                <ul>
                    <li>Fish</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

I find an example on https://codereview.stackexchange.com/questions/43449/parsing-xml-data-to-be-put-onto-a-site-with-jquery unfortunately it supports only first child level.

我在https://codereview.stackexchange.com/questions/43449/parsing-xml-data-to-be-put-onto-a-site-with-jquery上找到了一个例子,遗憾的是它只支持第一个子级别。

if needed; i call my xml via $.ajax

如果需要的话;我通过$ .ajax调用我的xml

$.ajax({
   url: 'webservice/Resim/Kategori.xml',
   dataType: 'xml',
   cache:true,
   success: parseXml
});

Any help will greatly appricated.

任何帮助都会大大增加。

1 个解决方案

#1

You have to iterate over the Urun elements, and append to the right place in the new UL element

您必须迭代Urun元素,并将其附加到新UL元素中的正确位置

function parseXml(xml) {

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

    $(xml).find('Urun').each(function(index, item) {
        var parent = parseInt( $(this).find('Parent').text() , 10 );
        var li     = $('<li />', {
            text : $(this).find('Name').text(),
            id   : $(this).find('ID').text()
        });

        if (parent !== 0) {
            var parentEl = ul.find('li#' + parent);

            if ( parentEl.find('ul').length === 0 ) 
                parentEl.append( $('<ul />') );

            parentEl.find('ul').append(li);

        } else {
            ul.append(li);
        }

    });

    $('body').append(ul);

}

FIDDLE