Question

我的XML文件包含：

 <?xml version="1.0" ?> 
     <document>
    <section id="1">
        <data>main</data>
        <chapter id="2">
            <data>Chapter 1</data>
            <subchapter id="3">
                <data>Subchapter 1.1</data>
            </subchapter>
            <subchapter id="4">
                <data>Subchapter 1.2</data>
            </subchapter>
        </chapter>
    </section>
    </document>

我想使用javascript或Jquery从该xml生成订单列表。

   if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","resources/input.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<ol>");
var x=xmlDoc.getElementsByTagName("section");
for (i=0;i<x.length;i++)
  { 
      document.write("<li>");
      document.write(x[i].getElementsByTagName("data")[0].childNodes[0].nodeValue);
             document.write("<ol>");
            var y=xmlDoc.getElementsByTagName("chapter");                       
            for (i=0;i<y.length;i++){
              document.write("<li>");
                     document.write(y[i].getElementsByTagName("data")[0].childNodes[0].nodeValue);
              document.write("</li>");
            }

        document.write("</ol>");

      document.write("</li>");


  }
document.write("</ol>");

相同xml的列表顺序如下：

<ul id="expList">                
            <!-- Section -->        
            <li>
                Main
                <ul id="chapter">
                        <!-- chapter -->
                    <li id="chapter1">
                        Chapter 1
                        <ul>
                                <!-- subchapter -->
                            <li>
                                <span>Subchapter 1.1</span>
                            </li>
                            <li>
                                <span>Subchapter 1.2</span>
                            </li>
                        </ul>
                    </li>

                </ul>
            </li>                
   </ul>

有人可以帮助我吗？

感谢您的进步。

Answer 1

jQuery被标记并提及，所以我编写了一个jQuery脚本来加载和解析XML。它有点乱，但应该足够了。

$(function () {
    $.ajax({
        type: "GET",
        url: "resources/input.xml",
        dataType: "xml",
        success: parseXML
   });
});

function parseXML (xml) {
    var $xml = $(xml);
    var $root = $('<ul>').attr('id', 'expList');
    // parse sections 
    $xml.find('section').each(function () {
        var section_data = $(this).children('data').text();
        var $section = $('<li>').append(section_data);
        var $chapters = $('<ul>').attr('id', 'chapter');
        // parse chapters
        $(this).children('chapter').each(function () {
            var chapter_id = 'chapter' + $(this).attr('id');
            var chapter_data = $(this).children('data').text();
            var $chapter = $('<li>')
                    .attr('id', chapter_id)
                    .append($('<p>').text(chapter_data));
            var $chapter_ul = $('<ul>');
            // parse subchapters
            $(this).children('subchapter').each(function () {
                var subchap_data = $(this).children('data').text();
                var $subchap = $('<li>');
                var $subchap_span = $('<span>').text(subchap_data);
                $subchap.append($subchap_span);
                $subchap.appendTo($chapter_ul);
            });
            $chapter.append($chapter_ul);
            $chapter.appendTo($chapters);
        });
        $section.append($chapters);
        $section.appendTo($root);
    });
    $root.appendTo($('body'));
}

Answer 2

实现以下输出

<ul id="expList">
    <li>main
        <ul id="Chapter">
            <li id="Chapter1">Chapter 1
                <ul>
                   <li>Subchapter 1.1</li>
                   <li>Subchapter 1.2</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

您可以尝试此操作（Vanilla JavaScript）

// ...
xmlDoc=xmlhttp.responseXML;

var x = xmlDoc.getElementsByTagName("section"),
    ul = document.createElement('ul'),
    subUl = document.createElement('ul'),
    li = document.createElement('li'),
    text = document.createTextNode(x[0].getElementsByTagName("data")[0].childNodes[0].nodeValue);
    li.appendChild(text);
    ul.appendChild(li);
    ul.setAttribute('id', 'expList');

for (var i=0; i < x.length; i++) {
    var  y = xmlDoc.getElementsByTagName("chapter");                       
    for (var j = 0; j < y.length; j++) {
        var newLi = document.createElement('li'),
            innerTxt = y[j].getElementsByTagName("data")[0].childNodes[0].nodeValue;
        var txt = document.createTextNode(innerTxt);
        newLi.appendChild(txt);
        newLi.setAttribute('id', innerTxt.replace(/\s/gi, ''));

        var z = xmlDoc.getElementsByTagName("subchapter"),
            newSubUl = document.createElement('ul');                       
        for (var k = 0; k < z.length; k++) {
            var newSubLi = document.createElement('li'),
                txt = document.createTextNode(z[k].getElementsByTagName("data")[0].childNodes[0].nodeValue);
            newSubLi.appendChild(txt);
            newSubUl.appendChild(newSubLi);
            newLi.appendChild(newSubUl);
        }
        subUl.setAttribute('id', 'chapter');
        subUl.appendChild(newLi);
    }
    li.appendChild(subUl);
}
ul.appendChild(li);
document.getElementsByTagName('body')[0].appendChild(ul);

dom操纵重现订单清单？

2 个答案: