1

jqueryを使用してネストされたxmlドキュメントを順序付けられていないリストに変換しようとしています。xmlドキュメントは

    <?xml version="1.0" encoding="utf-8"?>
    <Parent>
    <name>Director</name>
    <Children>Exe Director1</Children>
    <Children>Exe Director2</Children>
    <Parent>
        <name>Exe Director3</name>
        <Children>Sub Director 1</Children>
        <Children>Sub Director 2</Children>
        <Parent>
            <name>Sub Director 3</name>
            <Children>Cameraman 1</Children>
            <Children>Cameraman 2</Children>
        </Parent>
    </Parent>    
</Parent>

期待される出力：

 <ul>
    <li>Director
        <ul>
            <li>Exe Director 1</li>
            <li>Exe Director 2</li>
            <li>Exe Director 3
                <ul>
                    <li>Sub Director 1</li>
                    <li>Sub Director 2</li>
                    <li>Sub Director 3
                        <ul>
                            <li>Cameraman 1</li>
                            <li>Cameraman 2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

私が得ている出力。

 <ul>
        <li>Director</li>
        <ul>
            <li>Exe Director1</li>
            <li>Exe Director2</li>
            <li>Exe Director3</li>
            <ul>
                <li>Sub Director 1</li>
                <li>Sub Director 2</li>
                <li>Sub Director 3</li>
                <ul>
                    <li>Cameraman 1</li>
                    <li>Cameraman 2</li>
                </ul>
            </ul>
        </ul>
    </ul>

ご覧のとおり、子は親の内部ではなく、親liの外部で作成されています。最新バージョンのコード

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    var levels;
    $(document).ready(function() 
    {
        $.ajax({
            type: "GET",
            url: "test.xml",
            dataType: "xml",
            success: function (xml) { 
                var $ul = xmlParser(xml, $('#ListContainer'));
            }
        });
    });

    function xmlParser(xml,ul) {
        $(xml).contents().each(function (i, el) 
        {
            if (el.nodeName.toUpperCase() == "CHILDREN") 
            {
               $("<li>").text($(el).text()).appendTo($('ul:last')); // Append <li> Children
            } else if (el.nodeName.toUpperCase() == "NAME") 
            {
                $('<li>').text($(el).text()).appendTo(ul);
                $('<ul>').insertAfter($("li:last"));
            }
            else if (el.nodeName.toUpperCase() == "PARENT") 
            {
               if($('ul').length == 0)
                {
                    ul = ul.append('<ul>');
                }
                ul.append(xmlParser($(el),$("ul:last") )); // Recursively append the other Parent
            }
        });
        return ul;
    }
</script>
</head>
<body>
    <div id="ListContainer"></div>
</body>
</html>

私はこのコードに頭を悩ませています。何がうまくいかないかを手伝ってくれませんか。

ありがとう

4

4 に答える 4

1

すべての「PARENT」コンテンツの同じ「ul」要素にPARENT要素を追加しています。使用する

 $ul.find('li').last().append(xmlParser($(el)));

それ以外の

 $ul.append(xmlParser($(el)));

最後のAPIについては、以下のリンクを参照してください。

http://api.jquery.com/last/

于 2012-10-03T08:52:30.753 に答える
1

次の例のように、jQueryのmap関数を再帰的に使用することをお勧めします。

<script type="text/javascript">
$(function() {
    var map = function() {
            if ($(this).is("parent")) {
                var children = $(this).children().map(map).get().join('');
                $(this).children().remove();
                var result = "<li>" + $(this).text();
                return result + "<ul>" + children + "</ul></li>";
            }

            if ($(this).is("Children")) {
                return "<li>" + $(this).text() + "</li>";
            }
        };

    $.get("test.xml", function(data) {
        var result = $(data).map(map);
        $("div").html("<ul>" + result[0] + "</ul>");
    }, "html");
}); 
</script>

これにより、入力ツリーが完全にトラバースされ、結果の出力に入力と同じ「インデント」が含まれるようになります。

map()は配列を返すため、結果の文字列は配列の最初の項目として存在することに注意してください。

于 2012-10-03T14:58:31.120 に答える
1

これが私のコメントを首尾一貫した答えにまとめたものです->

  1. 再帰$("#ListContainer").append($ul);から抜け出します。
  2. <UL>外部メソッドを作成xmlParser()し、それをparentElemとして渡します。例var $ul = xmlParser(xml, $('<ul>')); $("#ListContainer").append($ul)（$ .ajaxの成功したコールバック）
  3. 関数$ulの出力結果として返すxmlParser()
于 2012-10-04T07:26:07.297 に答える
0

すべての「PARENT」コンテンツの同じ「ul」要素にPARENT要素を追加しています。使用する

$ul.find('li').last().append(xmlParser($(el)));

それ以外の

$ul.append(xmlParser($(el)));
于 2013-02-23T10:34:51.453 に答える