使用jQuery解析嵌套的xml(子元素) [英] Parse nested xml with jQuery (children elements)

问题描述

首先是我要使用的结构:

First off here is the structure I'm going for:

<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文件的结构:

Here's how my xml file is structured:

<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，但是之前我没有做过这种类型的嵌套列表.

I'm not sure how to loop through the elements to get the nested list. I know how to write xml elements to the html, but I haven't done this type of nested list before.

我试图分解脚本以遍历不同的元素，但这没有用，我知道第二部分的结构是错误的.我假设我必须对ul元素做某种外部包装或内部包装?

I tried breaking up the script to loop through the different elements, but this didn't work and I know my structure is wrong for the second part. I'm assuming I'll have to do some sort of outer or inner wrap of the ul elements?

$(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. 任何人都知道为什么行得通吗?

Working: Had to change the datatype to html instead of xml. Anyone have insight into why that works?

推荐答案

这是我更新的代码. 必须将dataType更改为"html". 不确定为什么行得通.

Here's my updated code. Had to change the dataType to "html". Not sure why that works.

$(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>");
}

这篇关于使用jQuery解析嵌套的xml(子元素)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！