Parsen von verschachtelten xml mit jQuery (Kinder-Elemente)

Ersten ab hier ist die Struktur, die ich bin zu gehen für:

<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>

Hier ist, wie meine xml-Datei strukturiert ist:

<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>

Ich bin mir nicht sicher, wie eine Schleife durch die Elemente, um die verschachtelte Liste.
Ich weiß, wie man schreiben von xml-Elementen auf html -, aber ich habe nicht getan, diese Art der verschachtelten Liste vor.

Habe ich versucht, oben zu brechen das script eine Schleife durch die verschiedenen Elemente, aber das hat nicht funktioniert und ich weiß, dass meine Struktur ist falsch für den zweiten Teil. Ich nehme an, ich werde zu tun haben, irgendeine Art von äußeren oder inneren umwickeln des 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>'
                                );
                            });*/

                          }

Arbeiten:
Musste ändern Sie den Datentyp html statt xml.
Wer noch einen Einblick in, warum das funktioniert?

Sie haben Zugang zu den server-code? Es könnte sein, VIEL einfacher, dies zu tun manipulation der auf dem server mit XSLT... und dann bekommen Sie die html-Zeichenfolge bereits vorbereitet.
Nein, zu müssen, es laufen alle frontend

InformationsquelleAutor Jason | 2011-12-07

jquery xml

Hier ist meine aktuelle code.
Hatte zum ändern der dataType zu "html".
Nicht sicher, warum das funktioniert.

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

InformationsquelleAutor Jason

Vorausgesetzt, Ihr XML-befindet sich in einer Datei namens "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');

AUSGABE:

<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>

BEARBEITEN

Für Ihren Hinweis habe ich Hinzugefügt, ganze html, was ich geschrieben habe, auf meiner Maschine, die ist in Ordnung.

HTML-Datei:

<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>

dies hat bei mir nicht funktioniert. Keine Ausgabe
Es funktioniert und habe es getestet auf firefox & IE, ich denke, Sie sind etwas fehlt. Haben Sie Ihre xml-Datei und html im selben Ordner? Es sollte so etwas wie store.xml und store.html
meine xml ist in xml/storelist.xml und ich hab eingestellt Sie Ihren code entsprechend. Ich legte das Skript inline-wo ich will, die Ausgabe, und es nicht wieder alles für mich.
können Sie mir sagen, auf welche browser testing & auch lassen Sie mich wissen, wie Sie zusammengeführt werden, ist der code? Ich vermute immer noch Ihr fehlen etwas, was...
'$(document).ready(function () { $.get('xml/storeList.xml', null, function (data) { document.write("<ul>"); $(data).find('Staat').each( function(){ document.write("<li><h3>" + $(this).finden("stateName").text() + "</h3><ul>"); $(this).finden("store").each(function(i,e){ Dokument.write("<li><a class='storeInactive' id='" + $(e).finden("storeID").text() + "' href='" + $(e).finden("storeURL").text() + "'>" + $(e).finden("storeName").text() + "</a></li>"); }); Dokument.write("</ul></li>"); }); Dokument.write("</ul>"); }, 'xml'); }); '

InformationsquelleAutor Siva Charan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.