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

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>