始終從XML節點獲取文本

Question

我知道這已經被問了很多，但是我遵循了這個建議，並且我仍然從我的xml/jQuery文件中看到一些非常具體的，看起來不一致的行爲： 在我開始之前這個問題，這是我的jQuery：

$(document).ready(function() { 
    var $body = $('body'); 
    var currentXMLObjects; 
    var $currentXMLContainers = new Array(); 
    var previousXMLObjects; 
    $body.append("<div id='content'><h3>Staff Organisational Chart</h1></div>"); 
    // Load the xml file using ajax 
    $.ajax({ 
     type: "GET", 
     url: "xml/content.xml", 
     dataType: "xml", 
     success: function (xml) { 
      $xml = $(xml); 
      console.log(xml.children[0]); 
      appendNewContainers(xml.children[0].children); 
     } 
    }); 

    function appendNewContainers(children) { 
     currentXMLObjects = children; 
     console.log("currentXMLObjects.length = "+currentXMLObjects.length); 
     for (var x=0;x<currentXMLObjects.length;x++) { 
      $currentXMLContainers.push($(currentXMLObjects[x])); 
      $("#content").append('<div class="container"><div>' + currentXMLObjects[x].childNodes[1].firstChild.nodeValue + '</div><div>' + currentXMLObjects[x].childNodes[1].firstChild.nodeValue + '</div><div>' + currentXMLObjects[x].childNodes[1].firstChild.nodeValue + '</div></div>'); 
     } 
    } 
}); 

而這裏的XML：

<content> 
    <level name="first name"> 
     <title>Title 1 Here</title> 
     <firstName>First Name 1</firstName> 
     <lastName>Last Name 1</lastName> 
     <contact>Active</contact> 
    </level> 
    <level name="second name"> 
     <title>Title 2 Here</title> 
     <firstName>First Name 2</firstName> 
     <lastName>Last Name 2</lastName> 
     <contact>Active</contact> 
    </level> 
    <level name="third name"> 
     <title>Title 3 Here</title> 
     <firstName>First Name 3</firstName> 
     <lastName>Last Name 3</lastName> 
     <contact>Active</contact> 
    </level> 
    <level name="fourth name"> 
     <title>Title 4 Here</title> 
     <firstName>First Name 4</firstName> 
     <lastName>Last Name 4</lastName> 
     <contact>Active</contact> 
    </level> 
    <level name="fifth name"> 
     <title>Title 5 Here</title> 
     <firstName>First Name 5</firstName> 
     <lastName>Last Name 5</lastName> 
     <contact>Active</contact> 
    </level> 
</content> 

現在我想要做的就是從標題的文本，名字和lastName節點和追加他們在divs到一個包含div。

我花了一段時間，試驗了.childNodes [0]，firstChild和nodeValue的各種排列，以實現我可以使用currentXMLObjects [x]中的索引'1'獲取每個'標題' .childNodes [1] ...問題是我似乎無法訪問firstName和lastName節點。我已經嘗試了所有我能想到的安排：

currentXMLObjects [X] .childNodes [1] .childNodes [1] .nodeValue拋出一個空的錯誤，一樣： currentXMLObjects [X] .childNodes [0]。的childNodes [1] .nodeValue

currentXMLObjects [X] .childNodes [1] .nodeValue返回並追加 '空'，並

currentXMLObjects [X] .childNodes [2] .nodeValue附加任何操作。

類似地，缺少中間'childNodes [n]'的任何組合都返回null或全無。

任何人有任何線索，這裏發生了什麼？我很驚訝'標題'節點似乎深深嵌入在XML中;發送到'appendNewContainers'函數的nodeList已經被深入研究。但是尋找「級別」元素的子節點在較淺的深度不起作用。

任何幫助，非常感謝。 乾杯。

Answer 1

將檢索到的XML附加到文檔並使用querySelectors查詢內容是否是一個想法？喜歡的東西（簡單無jQuery的例子，但應該很容易使用jQuery的追加XML和查詢它）：

var xml = document.querySelector('content'); 
 

 
var names = document.querySelectorAll('[name]'); 
 
var result = document.querySelector('#result'); 
 

 
[].slice.call(names).forEach(
 
    function(nameElement) { 
 
    result.textContent += 
 
     nameElement.querySelector('firstName').textContent + ' ' + 
 
     nameElement.querySelector('lastName').textContent + 
 
     '\n'; 
 
    } 
 
);

content { 
 
    display: none; 
 
}

<pre id="result"></pre> 
 

 
<content> 
 
    <level name="first name"> 
 
     <title>Title 1 Here</title> 
 
     <firstName>First Name 1</firstName> 
 
     <lastName>Last Name 1</lastName> 
 
     <contact>Active</contact> 
 
    </level> 
 
    <level name="second name"> 
 
     <title>Title 2 Here</title> 
 
     <firstName>First Name 2</firstName> 
 
     <lastName>Last Name 2</lastName> 
 
     <contact>Active</contact> 
 
    </level> 
 
    <level name="third name"> 
 
     <title>Title 3 Here</title> 
 
     <firstName>First Name 3</firstName> 
 
     <lastName>Last Name 3</lastName> 
 
     <contact>Active</contact> 
 
    </level> 
 
    <level name="fourth name"> 
 
     <title>Title 4 Here</title> 
 
     <firstName>First Name 4</firstName> 
 
     <lastName>Last Name 4</lastName> 
 
     <contact>Active</contact> 
 
    </level> 
 
    <level name="fifth name"> 
 
     <title>Title 5 Here</title> 
 
     <firstName>First Name 5</firstName> 
 
     <lastName>Last Name 5</lastName> 
 
     <contact>Active</contact> 
 
    </level> 
 
</content>

Answer 2

你爲什麼不使用jQuery也爲XML數據？看看這個例子（使用當前XML結構）：jsFiddle

var $target = $('content'); 
$target.children().each(function(){ 
    $body.append($(this).attr('name') + "<br />"); 
    $body.append($('title', this).text() + "<br />"); 
    $body.append($('lastName', this).text() + "<br />"); 
    $body.append($('contact', this).text() + "<br />"); 
    $body.append('<br /><br/>'); 
}); 

編輯：

使用你的代碼結構（包括使用jQuery爲例）：jsFiddle

var xml = $('content'); 

appendNewContainers(xml[0].children); 

function appendNewContainers(children) { 
    currentXMLObjects = children; 

    for (var x= 0; x < currentXMLObjects.length; x++) { 
     $("#content").append(
      '<div class="container"><div>' + currentXMLObjects[x].children[0].innerText + 
      '</div><div>' + currentXMLObjects[x].children[1].innerText + 
      '</div><div>' + currentXMLObjects[x].children[2].innerText + '</div></div>' 
     ); 
    } 

    $('#content').append('<br style="margin-bottom: 40px" />'); 

    // jQuery way using tag names 
    $(currentXMLObjects).each(function(){ 
     $("#content").append(
      '<div class="container"><div>' + $('title', this).text() + 
      '</div><div>' + $('firstName', this).text() + 
      '</div><div>' + $('lastName', this).text() + '</div></div>' 
     ); 
    }); 
}