在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