获取 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 访问图片说明。

这是我的代码，但它返回 "undefined" 作为字幕：

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 代码中有一个非常小的错误，在查找 "data-name" 时使用 $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() 不是必需的，其中 $.ajax() 处的 dataType 设置为 "xml"，XMLDocument 应作为 xml 返回success 个电话 $.ajax() 个。

另请注意，在问题 javascript 的 .each() 调用中缺少关闭 )。

$.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'));
      })
    })
  }
});

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

获取 jQuery 中 xml 个子节点的属性

Getting attribute of xml child nodes in jQuery

xml

jquery

attr