使用 xml 使用 jquery 创建一个无序列表答案

【问题标题】：create an unordered list with jquery using xml使用 xml 使用 jquery 创建一个无序列表
【发布时间】：2010-10-27 07:31:49
【问题描述】：

我有一个 xml 文件，我想使用 jquery 将其转换为无序列表。到目前为止，我设法使列表正常工作，除了 xml 的第三级。目前我的代码编写了“Navigation_sub_3”的所有子项。我想弄清楚的是如何只写 level_2 中的子节点，所以输出将是

Strategy
  Views
     IBM
     etc.

UML
  Development
    Architecure
    etc

Platform
  Model
    BPEL
    OSLO
    etc
  Service
    Google
    Live
    etc.

下面是我的 html/jquery 文件和 xml。谁能帮我看看如何显示第三级？

干杯克里斯

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script src="js/jquery-1.2.6.js" type="text/javascript"></script>

    <script type="text/javascript">
        function XmlOnLoad(xmlData, strStatus)
        {
            var jData = $(xmlData);
            var jccNav = jData.find("Navigation");
            var jSections = jccNav.children();
            var jList = $("#Navi");

            jSections.each(function(intSectionIndex)
            {
                var jSection = $(this);
                var jTerm = $("<li></li>");
                var jDef2 = $("<ul></ul>");
                var jLevel2 = $("<b></b>");
                var jLevel3 = $("<b></b>");

                jSection.children().children().each(function(intPartIndex)
                {
                    var jPart3 = $(this);
                    var jText3 = $("<li></li>");

                    // Set the li text.
                    jText3.html("<a>" + jPart3.attr("tooltip") + "3.level</a>");

                    // Append to list.
                    jLevel3.append(jText3);
                });

                jSection.children().each(function(intPartIndex)
                {
                    var jPart2 = $(this);
                    var jText2 = $("<li></li>");

                    // Set the li text.
                    jText2.html("<a>" + jPart2.attr("tooltip") + " 2.level </a><ul>" + jLevel3.html());

                    // Append to list.
                    jLevel2.append(jText2);

                });

                jTerm.html("<a>"
                            + $(this).attr("tooltip")
                            + "1.ebene</a>"
                            + "<ul>"
                            + jLevel2.html()
                             );

                jList.append(jTerm);

                $("#homer").html(jList.html());
            });
        };

        $(document).ready(function()
        {
            $.get("content.xml", {}, XmlOnLoad);


        });
    </script>



</head>
<body>
<div id="homer"></div>


</body>
</html>

内容.xml

<?xml version="1.0" encoding="utf-8"?>
<Navigation>
    <Navigation_sub_1 tooltip="Strategy">
        <!--1 Button-->
        <level_2 name="Nav1" number="5" tooltip="Views">
            <level_3 name="Nav1_5" number="15" tooltip="IBM" />
            <level_3 name="Nav1_5" number="13" tooltip="Mainframe" />
            <level_3 name="Nav1_5" number="7" tooltip="Novell"     />
            <level_3 name="Nav1_5" number="6" tooltip="Open- Source"/>
            <level_3 name="Nav1_5" number="1" tooltip="Oracle"      />
            <level_3 name="Nav1_5" number="9" tooltip="SAP"         />
            <level_3 name="Nav1_5" number="8" tooltip="Sun"         />
        </level_2>
    </Navigation_sub_1>
    <!--2 Button-->
    <Navigation_sub_2 tooltip="UML">
        <level_2 name="Nav2" number="5" tooltip="Development">
            <level_3 name="Nav2_5" number="10" tooltip="Architecture"/>
            <level_3 name="Nav2_5" number="6" tooltip="Patterns"     />
            <level_3 name="Nav2_5" number="1" tooltip="SOA"          />
        </level_2>
    </Navigation_sub_2 >
    <!--3 Button-->
    <Navigation_sub_3 tooltip="Platform">
        <level_2 name="Nav3" number="1" tooltip="Model">
            <level_3 name="Nav3_1" number="15" tooltip="BPEL" />
            <level_3 name="Nav3_1" number="9" tooltip="BPMN"  />
            <level_3 name="Nav3_1" number="7" tooltip="DSL"   />
            <level_3 name="Nav3_1" number="10" tooltip="Oslo" />
            <level_3 name="Nav3_1" number="1" tooltip="UML"   />
        </level_2>
        <level_2 name="Nav3" number="7" tooltip="Service" >
            <level_3 name="Nav3_7" number="3" tooltip="Azure Services" />
            <level_3 name="Nav3_7" number="11" tooltip="ISB"           />
            <level_3 name="Nav3_7" number="6" tooltip="Live"           />
            <level_3 name="Nav3_7" number="8" tooltip="Live Mesh"      />
            <level_3 name="Nav3_7" number="13" tooltip="REST"          />
            <level_3 name="Nav3_7" number="9" tooltip="Web- services"  />
            <level_3 name="Nav3_7" number="1" tooltip="Windows Azure"  />
        </level_2>
    </Navigation_sub_3>


</Navigation>

【问题讨论】：

标签： javascript jquery xml

【解决方案1】：

您是否尝试过使用递归？您可以编写一个名为writeSection 的javascript 函数。这个函数会将每个节点写入一个节中，然后如果一个节点有子节点，它会调用自己来写入这些子节点。

【讨论】：

嗨，Keltex，感谢您的建议，我在第二级部分的每个循环中都可以使用它。干杯，克里斯