如何遍歷自定義XML結構並在jQuery中使用信息

作爲一個副項目，我目前正在嘗試一些東西，並讓我的頭繞過瀏覽器的XML解釋。我試圖實現的是：讀取並將XML轉換爲可見的HTML結構。如何遍歷自定義XML結構並在jQuery中使用信息

假設這是我的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);

如何將輸入轉換爲XML，以便我可以前往和使用jQuery進行操作？這裏有一個fiddle玩。

來源

2014-10-10 Bram Vanroy

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

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

返回所有文檔

小提琴在node元素：http://jsfiddle.net/rj3hpy6m/

對於屬性，那麼你可以使用.attr()獲得的屬性。例如從第一個節點獲取屬性「cat」。

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

來源

2014-10-12 18:25:01

我我將如何去獲得該節點的屬性？ – 2014-10-12 18:55:56

或者讓第一個孩子或什麼。一些基本的jQuery選擇器操作。 – 2014-10-12 18:59:05

在使用'.attr（）'的例子中編輯，您可以使用'.attr（）'來獲取屬性。你可以在集合中使用任何jQuery方法，比如使用.children（）獲得第一個孩子。first（） – 2014-10-12 19:01:39

我相信下面的演示可以幫助你這一切了。它遍歷所有節點和輸出，值爲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>

來源

2014-10-14 02:58:21 PeterKA

如何遍歷自定義XML結構並在jQuery中使用信息

回答

相關問題