jQuery中如何遍历自定义XML结构和使用信息

Question

作为一个附带项目，我目前正在尝试一些东西，并了解浏览器对 XML 的解释。我想要实现的是：读取 XML 并将其转换为可见的 HTML 结构。

假设这是我的 XML。 （对于那些好奇的人，它是荷兰语句子的语言表示。）我希望能够遍历这个结构，并从中收集信息。 （并且，作为扩展，可以随意将其转换为我自己的 HTML。）

<node begin="0" cat="top" end="11" id="0" rel="top">
    <node begin="0" cat="smain" end="10" id="1" rel="--">
        <node begin="0" cat="np" end="5" id="2" rel="su">
            <node begin="0" end="1" id="3" lemma="de" pos="det" pt="lid" rel="det" root="de" word="De"/>
            <node begin="1" end="2" genus="zijd" getal="ev" graad="basis" id="4" lemma="helft" ntype="soort" pos="noun" pt="n" rel="hd" root="helft" word="helft"/>
            <node begin="2" cat="pp" end="5" id="5" rel="mod">
                <node begin="2" end="3" id="6" lemma="van" pos="prep" pt="vz" rel="hd" root="van" word="van"/>
                <node begin="3" cat="np" end="5" id="7" rel="obj1">
                    <node begin="3" end="4" id="8" lemma="al" pos="det" positie="prenom" pt="vnw" rel="det" root="alle" word="alle"/>
                    <node begin="4" end="5" getal-n="mv-n" id="9" lemma="werkloos" pos="adj" positie="nom" pt="adj" rel="hd" root="werkloos" word="werklozen"/>
                </node>
            </node>
        </node>
        <node begin="5" end="6" id="10" lemma="zijn" pos="verb" pt="ww" pvagr="ev" rel="hd" root="ben" word="is" wvorm="pv"/>
        <node begin="6" cat="ap" end="10" id="11" rel="predc">
            <node begin="6" buiging="zonder" end="7" graad="comp" id="12" lemma="jong" pos="adj" pt="adj" rel="hd" root="jong" word="jonger"/>
            <node begin="7" cat="cp" end="10" id="13" rel="obcomp">
                <node begin="7" conjtype="onder" end="8" id="14" lemma="dan" pos="comparative" pt="vg" rel="cmp" root="dan" word="dan"/>
                <node begin="8" cat="np" end="10" id="15" rel="body">
                    <node begin="8" end="9" id="16" lemma="30" pos="num" positie="prenom" pt="tw" rel="det" root="30" word="30"/>
                    <node begin="9" end="10" genus="onz" getal="ev" id="17" lemma="jaar" pos="noun" pt="n" rel="hd" root="jaar" word="jaar"/>
                </node>
            </node>
        </node>
    </node>
    <node begin="10" end="11" id="18" lemma="." pos="punct" postag="LET()" pt="let" rel="--" root="." word="."/>
</node>

但是，这并不像预期的那么容易。我尝试使用 jQuery 的 $.parseXML(data)，然后将其转换为 jQuery 对象，但我似乎无法遍历应该生成的 XML 的内部结构。

如果#xml-input 是包含上述XML 的代码标签，则以下日志返回undefined。

var xml = $("#xml-input").html(),
    xmlParsed = $.parseXML(xml),
    xmlObject = $(xmlParsed);

console.log(xmlObject.node);

如何将输入转换为可以使用 jQuery 访问和操作的 XML？这是一个fiddle 可以玩。

Answer 1

您可以使用 jQuery 方法来操作使用 $.parseXML 解析的 XML 文档。例如，

console.log(xmlObject.find("node"));

返回文档中的所有 node 元素

小提琴：http://jsfiddle.net/rj3hpy6m/

对于属性，您可以使用.attr() 获取属性。例如从第一个节点获取属性“cat”。

xmlObject.find("node").first().attr("cat") // top

Answer 2

我相信下面的演示可以帮助您解决所有问题。它遍历所有节点和输出，id, begin and end 值。如果您有任何问题，请告诉我们。

$(document).ready(function() {
  var xml = $("#xml_input").val(),
    xmlParsed = $.parseXML(xml),
    xmlObject = $(xmlParsed);
  function output( nodes ) {
    nodes.each(function() {
      $('pre.out').append( 'id='+this.id + ',\t\tbegin='+$(this).attr('begin') +  ',\tend='+ $(this).attr('end') + '\n' );
      output( $(this).children('node') );
    });
  }

  output( xmlObject.children('node') );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
INPUT: <br>
<textarea id="xml_input"><node begin="0" cat="top" end="11" id="0" rel="top">
    <node begin="0" cat="smain" end="10" id="1" rel="--">
        <node begin="0" cat="np" end="5" id="2" rel="su">
            <node begin="0" end="1" id="3" lemma="de" pos="det" pt="lid" rel="det" root="de" word="De"/>
            <node begin="1" end="2" genus="zijd" getal="ev" graad="basis" id="4" lemma="helft" ntype="soort" pos="noun" pt="n" rel="hd" root="helft" word="helft"/>
            <node begin="2" cat="pp" end="5" id="5" rel="mod">
                <node begin="2" end="3" id="6" lemma="van" pos="prep" pt="vz" rel="hd" root="van" word="van"/>
                <node begin="3" cat="np" end="5" id="7" rel="obj1">
                    <node begin="3" end="4" id="8" lemma="al" pos="det" positie="prenom" pt="vnw" rel="det" root="alle" word="alle"/>
                    <node begin="4" end="5" getal-n="mv-n" id="9" lemma="werkloos" pos="adj" positie="nom" pt="adj" rel="hd" root="werkloos" word="werklozen"/>
                </node>
            </node>
        </node>
        <node begin="5" end="6" id="10" lemma="zijn" pos="verb" pt="ww" pvagr="ev" rel="hd" root="ben" word="is" wvorm="pv"/>
        <node begin="6" cat="ap" end="10" id="11" rel="predc">
            <node begin="6" buiging="zonder" end="7" graad="comp" id="12" lemma="jong" pos="adj" pt="adj" rel="hd" root="jong" word="jonger"/>
            <node begin="7" cat="cp" end="10" id="13" rel="obcomp">
                <node begin="7" conjtype="onder" end="8" id="14" lemma="dan" pos="comparative" pt="vg" rel="cmp" root="dan" word="dan"/>
                <node begin="8" cat="np" end="10" id="15" rel="body">
                    <node begin="8" end="9" id="16" lemma="30" pos="num" positie="prenom" pt="tw" rel="det" root="30" word="30"/>
                    <node begin="9" end="10" genus="onz" getal="ev" id="17" lemma="jaar" pos="noun" pt="n" rel="hd" root="jaar" word="jaar"/>
                </node>
            </node>
        </node>
    </node>
    <node begin="10" end="11" id="18" lemma="." pos="punct" postag="LET()" pt="let" rel="--" root="." word="."/>
</node>
</textarea><br><br>

OUTPUT:<br>
<pre class="out"></pre>