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

Question

我对使用 jquery 解析 xml 还很陌生，所以如果我的问题看起来很菜鸟，请原谅我。

我有一个 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>

期望的 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>

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

如果需要；我通过 $.ajax

调用我的 xml

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

任何帮助将不胜感激。

Answer 1

您必须遍历 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