Question

首先，这是我要去的结构：

<ul>
   <li>
      <h3>State Name 1</h3>
      <ul>
         <li>
            <a href="storeurl" id="storeid">storename</a>
         </li>
         <li>
            <a href="storeurl" id="storeid">storename2</a>
         </li>
      </ul>
   </li>
   <li>
      <h3>State Name 2</h3>
      <ul>
         <li>
            <a href="storeurl" id="storeid">storename</a>
         </li>
      </ul>
   </li>
</ul>

以下是我的xml文件的结构：

<storeList>
    <state>
        <stateName>Maine</stateName>
            <store>
                <storeName>first store</storeName>
                <storeID>store1</storeID>
                <storeURL>http://www.url.com</storeURL>
            </store>
            <store>
                <storeName>second store</storeName>
                <storeID>store2</storeID>
                <storeURL>http://www.url.com</storeURL>
            </store>
            <store>
                <storeName>third store</storeName>
                <storeID>store3</storeID>
                <storeURL>http://www.url.com</storeURL>
            </store>
    </state>
    <state>
        <stateName>Connecticut</stateName>
            <store>
                <storeName>first store</storeName>
                <storeID>store4</storeID>
                <storeURL>http://www.url.com</storeURL>
            </store>
    </state>
</storeList>

我不确定如何遍历元素以获取嵌套列表。我知道如何将xml元素写入html，但我之前没有做过这种类型的嵌套列表。

我尝试分解脚本以循环遍历不同的元素，但这不起作用，我知道我的结构对于第二部分是错误的。我假设我必须做一些ul元素的外包裹或内包裹？

$(document).ready(function () {
                          $.ajax({
                              type: "GET",
                              url: "xml/storeList.xml",
                              dataType: "xml",
                              success: xmlParser
                          });
                          });

                          function xmlParser(xml) {

                          $(xml).find("state").each(function () {

                              $(".storeListContent").append('<ul><li><h3>' +
                                $(this).find("stateName").text() +
                                '</h3></li></ul>');



                          });

                            /*$(xml).find("store").each(function () {
                           $(".storeListContent ul li").append('<ul><li>' +
                                '<a class="storeInactive" id="' +
                                $(this).find("storeID").text() +
                                '" href="' +
                                $(this).find("stateURL").text() +
                                '">' +
                                $(this).find("stateName").text() +
                                '</a>' +
                                '</li></ul>'
                                );
                            });*/

                          }

的工作： 的不得不将数据类型更改为html而不是xml。任何人都了解为什么有效？

Answer 1

这是我更新的代码。必须将dataType更改为"html"。不知道为什么会有效。

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "xml/storeList.xml",
        dataType: "html",
        success: xmlParser
    });
});

function xmlParser(xml) {
    $(".storeListContent").append("<ul>");
    $(xml).find('state').each(function () {

        $(".storeListContent").append("<li><h3>" + $(this).find("stateName").text() + "</h3><ul>");

        $(this).find("store").each(function (i, e) {
            $(".storeListContent").append("<li><a class='storeInactive' id='" + $(e).find("storeID").text() + "' href='" + $(e).find("storeURL").text() + "'>" + $(e).find("storeName").text() + "</a></li>");
        });
        $(".storeListContent").append("</ul></li>");
    });
    $(".storeListContent").append("</ul>");
}

Answer 2

假设您的XML位于名为“store.xml”

的文件中

$.get('store.xml', null, function (data) {
    document.write("<ul>");
    $(data).find('state').each( function(){

        document.write("<li><h3>" + $(this).find("stateName").text() + "</h3><ul>");

        $(this).find("store").each(function(i,e){
            document.write("<li><a class='storeInactive' id='" +    $(e).find("storeID").text() + "' href='" + $(e).find("storeURL").text() + "'>" + $(e).find("storeName").text() + "</a></li>");
        });
        document.write("</ul></li>");
    });
    document.write("</ul>");
}, 'xml');

输出：

<ul>
    <li>
        <h3>Maine</h3>
        <ul>
            <li>
                <a class="storeInactive" id="store1" href="http://www.url.com">first store</a>
            </li>
            <li>
                <a class="storeInactive" id="store2" href="http://www.url.com">second store</a>
            </li>
            <li>
                <a class="storeInactive" id="store3" href="http://www.url.com">third store</a>
            </li>
        </ul>
    </li>
    <li>
        <h3>Connecticut</h3>
        <ul>
            <li>
                <a class="storeInactive" id="store4" href="http://www.url.com">first store</a>
            </li>
        </ul>
    </li>
</ul>

修改

供你参考我已经添加了整个html，我已经在我的机器上写了这个工作正常。

HTML文件：

<script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" > $.get('xml/store.xml', null, function (data) { document.write("<ul>"); $(data).find('state').each( function(){ document.write("<li><h3>" + $(this).find("stateName").text() + "</h3><ul>"); $(this).find("store").each(function(i,e){ document.write("<li><a class='storeInactive' id='" + $(e).find("storeID").text() + "' href='" + $(e).find("storeURL").text() + "'>" + $(e).find("storeName").text() + "</a></li>"); }); document.write("</ul></li>"); }); document.write("</ul>"); }, 'xml'); </script>

使用jQuery解析嵌套的xml（子元素）

2 个答案:

输出：

HTML文件：