在jQuery中獲取xml子節點的屬性

Question

我不得不修改這個問題，因爲我遺漏了一段破壞事物的代碼。我只想看看某個教會的圖像。

XML文件：

<churches> 
<church> 
     <data-name>germanevangelical</data-name> 
     <name>German Evangelical</name> 
     <address>501 Elm St.</address> 
     <opened>1887</opened> 
     <neighborhood>East</neighborhood> 
     <region>East</region> 
     <architecture>Gothic</architecture> 
     <denomination>Evangelical Lutheran</denomination> 
     <closed>2006</closed> 
     <image caption="Mary Smith">image_1_forweb.jpg</image> 
     <image caption="Mary Smith">image_2_forweb.jpg</image> 
     <image caption="Mary Smith">image_3_forweb.jpg</image> 
</church> 
... (more church nodes) 
</churches> 

我想用jQuery訪問圖像字幕。

這裏是我的代碼，但它返回「未定義」爲標題：

var cName = 'germanevangelical'; 
$.ajax({ 
       type: "GET", 
       url: "churchdata.xml", 
       dataType: "xml", 
       success: function(xml) { 
       var name = $(xml).find("data-name"); //get church names from xml file 
       $(name).each(function(id, item) { 
        if ($(item).text() == cName) { //find the right church in the xml file 
         $(item).parent().find("image").each(function(id, node) { 
          console.log('id: ' + $(node).attr('caption'));//undefined 
         }) 
        }//end if right church in xml file 
       }) 
       } 
      }); 

任何人都可以看到我做錯了什麼嗎？

Answer 1

解析時，在您的ajax代碼中存在一個非常小的錯誤，在找到「數據名稱」時使用$ xml而不是$（xml）。請檢查下面的代碼..嘗試使用chrome運行你的頁面，並檢查開發人員工具是否有任何錯誤，如果有任何錯誤它不會工作。

var cName = 'germanevangelical'; 
$.ajax({ 
type: "GET", 
    url: "churchdata.xml", 
    dataType: "xml", 
    success: function (xml) { 
    var xmlDoc = $.parseXML(xml), 
    $xml = $(xmlDoc); 
    var name = $xml.find("data-name"); //get church names from xml file 
     $(name).each(function(id,item) { 
       if ($(item).text() == cName) { 
       $(item).parent().find("image").each(function(id,node) { 
        console.log('id: ' + $(node).attr('caption')); //undefined 
       }); 
       } 
     }); 
     } 
}); 

Answer 2

$.parseXML()是沒有必要的，其中dataType在$.ajax()設置爲"xml"的XMLDocument應$.ajax()通話success返回爲xml。

還請注意，錯過關閉)在.each()調用javascript問題。

$.ajax({ 
    type: "GET", 
    url: "churchdata.xml", 
    dataType: "xml", 
    success: function(xml) { 
    console.log(xml); 
    var name = $(xml).find("data-name"); //get church names from xml file 
    $(name).each(function(id, item) { 
     $(item).parent().find("image").each(function(id, node) { 
     console.log('id: ' + $(node).attr('caption')); 
     }) 
    }) 
    } 
}); 

plnkr http://plnkr.co/edit/HYaaxN0EY0JtkciBMJpl?p=preview