循环遍历XML解析函数并在HTML中显示

时间:2013-03-21 11:33:01

标签: javascript html xml cordova xml-parsing

我有一个功能,目前在iPhone应用程序中显示硬编码的XML数据;

    function viewXMLFiles() {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "TestInfo.xml", false);
        xmlhttp.send();

        xmlDoc = xmlhttp.responseXML;

        document.getElementById("docname").innerHTML = xmlDoc.getElementsByTagName("document_name")[0].childNodes[0].nodeValue;
        document.getElementById("filetype").innerHTML = xmlDoc.getElementsByTagName("file_type")[0].childNodes[0].nodeValue;
        document.getElementById("fileloc").innerHTML = pathToRoot + "/" + document.getElementById("docname").innerHTML;

        document.getElementById("docname1").innerHTML = xmlDoc.getElementsByTagName("document_name")[1].childNodes[0].nodeValue;
        document.getElementById("filetype1").innerHTML = xmlDoc.getElementsByTagName("file_type")[1].childNodes[0].nodeValue;
        document.getElementById("fileloc1").innerHTML = pathToRoot + "/" + document.getElementById("docname1").innerHTML;
    }

我希望将它放入循环中,所以当我添加上传文件的选项时,文件将自动循环并在单击按钮时显示数据而不必更改代码。按钮按此编码;

<button onclick = "viewXMLFiles(); document.getElementById('showDocumentLink').style.display = 'block';">View Document Info</button><br>

并将页面设置为将XML加载到其中;

    <div id = "doclist">
        <h2>Document 1;</h2>
        <label>Document Name;</label><br><span id = "docname"></span><br>
        <label>File Type</label><br><span id = "filetype"></span><br>
        <label>File Location</label><br><span id = "fileloc"></span><br>
    </div>

    <div id = "doclist">
        <h2>Document 2;</h2>
        <label>Document Name;</label><br><span id = "docname1"></span><br>
        <label>File Type</label><br><span id = "filetype1"></span><br>
        <label>File Location</label><br><span id = "fileloc1"></span><br>
    </div>

我是XML文件的新手以及如何使用JavaScript解析它们,所以任何有助于向我展示如何将它们正确地放入for循环的帮助都会很棒。我真的不知道该怎么做,所以任何帮助都会非常感激。在此先感谢:)

1 个答案:

答案 0 :(得分:0)

试试这个......

xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$title = $xml.find( "document_name" );
$("#docname").append($title.text());