循环通过 XML 解析器？答案

【问题标题】：Loop through XML Parser?循环通过 XML 解析器？
【发布时间】：2013-03-14 19:06:45
【问题描述】：

我正在开发一个应用程序，单击按钮时，存储在 XML 文件中的文档信息列表会显示在屏幕上的 <ul> 标记中。函数中的当前 JavaScript 是；

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

但我想设置它，以便即使添加更多文件信息，该功能也会显示它。我已经看过Jquery xml parsing loops 这个问题，但我无法让该功能正常工作。这是 XML 文件；

 <document_list>

<document>

    <document_name>Holidays.pdf</document_name><br />

    <file_type>.pdf</file_type> <br />

    <file_location>TEST</file_location> <br />

</document>

<document>

    <document_name>iPhone.jsNotes.docx</document_name><br />

    <file_type>.docx</file_type><br />

    <file_location>TEST</file_location><br />

</document>

 </document_list>

这是我正在使用的 HTML。我正在使用一个按钮和<ul> 标签；

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

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

谁能帮我把它放到一个循环中？我已经链接了 jQuery 和 jQTouch，所以我可以同时使用它们。

提前谢谢你xx

【问题讨论】：

<div id = "doclist"> 不是有效的 HTML； = 周围不应有空格。此外，id 应该是唯一的，但相同的值在您的示例中出现两次。

标签： javascript jquery html loops xml-parsing

【解决方案1】：

使用以下循环代码。

<script>
    xmlDoc = $.parseXML( xml ),
    $xml = $( xmlDoc );
    var documents = $xml.find('document_list');

    documents.children('document').each(function() {
      var name = $(this).find('document_name').text();
      var file_type = $(this).find('file_type').text();
      var file_location = $(this).find('file_location').text();

      // now do whatever you like with above variable
    });
</script>

【讨论】：

$(this), $(this), $(this) ? $ 开销很大，缓存它 - var $this = $(this);
当包装单个 DOM 元素 $ 有一些开销，所以确实应该缓存它，但它不是“巨大的”。

【解决方案2】：

使用 Irfan 的答案作为基础，将值添加到标签中添加一个计数器，然后只需将从 XML 解析循环中获取的值插入到相应的范围中。

<script>
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "TestInfo.xml", false);
    xmlhttp.send();

    xmlDoc = xmlhttp.responseXML;
    $xml = $( xmlDoc );
    var documents = $xml.find('document_list');

    var doccount = 0;

    //will be used to find the HTML elements
    var namelabel = "docname"; 
    var typelabel = "filetype"; 
    var locationlabel = "fileloc";

    documents.children('document').each(function() {
      var name = $(this).find('document_name').text();
      var file_type = $(this).find('file_type').text();
      var file_location = $(this).find('file_location').text();

      //after the first document we need to add the number to the span id
      if(doccount > 0){ 
         namelabel = "docname" + doccount;
         typelabel = "filetype" + doccount;
         locationlabel = "fileloc" + doccount;
      }

      //insert the XML values into the label
      $('span#'+namelabel).html(name);
      $('span#'+typelabel).html(file_type);
      $('span#'+locationlabel).html(file_location);  

      //increment the counter
      doccount++;
    });
</script>

【讨论】：

if 语句期间构建的字符串错误...已编辑。
您的函数可能未正确传递 XML 文件。我已经编辑了我的答案以结合您的旧功能和新功能。使用 XMLHttpRequest 值而不是 JQuery 解析版本。

【解决方案3】：

这是一个原生 JavaScript 实现，因此您可以查看如何以这种方式进行操作并进行比较等。

function viewXMLFiles() {
    // var everything
    var xmlhttp = new XMLHttpRequest(),
        xmlDoc,
        nodes, i, j, counter = -1, suffix,
        document_name, file_type, file_location;
    // request page
    xmlhttp.open("GET", "TestInfo.xml", false),
    xmlhttp.send();
    // false meant synchronous req. so can go straight to reading document
    xmlDoc = xmlhttp.responseXML;
    // loop over <document> nodes
    nodes = xmlDoc.childNodes; // shorthand
    j = nodes.length;
    for (i = 0; i < j; ++i) {
        if ('document' === nodes[i].tagName.toLowerCase()) {
            // nodes[i] is a <document>, increment counter
            ++counter;
            // get nodes of intrest
            document_name = nodes[i].getElementsByTagName("document_name")[0];
            file_type = nodes[i].getElementsByTagName("file_type")[0];
            file_location = nodes[i].getElementsByTagName("file_location")[0];

            // do what you want with these, e.g.
            suffix = counter || ''; // don't append a number for 0
            document.getElementById('docname'+suffix).textContent = document_name.textContent;
            document.getElementById('filetype'+suffix).textContent = file_type.textContent;
            document.getElementById('fileloc'+suffix).textContent = pathToRoot + "/" + file_location.textContent;
        }
    }
}

此外，您应该考虑 HTML 的有效性，正如我在评论中提到的那样；

属性名称/值对的等号周围不应有空格，即<tag attrib="val"/> 不 <tag attrib = "val"/>
每个 id 属性都应该有一个唯一的值，不与文档上的任何其他人共享，即 not <tag id="shared"/><tag id="shared"/>

【讨论】：