使用jquery，我如何迭代xml中的每个节点？

我有关于下面的示例代码的另一个问题。使用jquery，我如何迭代xml中的每个节点？

下面index.html文件

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 

     <style> 
      #frm, #raw {display:block; float:left; width:210px}, 
      #raw {height:150px; width:310px; margin-left:0.5em} 
     </style> 
     <title> INDEX </title> 
    </head> 

    <body> 
     <form id="frm"> 
      Profile: <select id="profiles"> 
      <option> </option> 
      </select> 
      <br></br> 

      Format:<select id="formats"> 
      <option value="json"> JSON </option> 
      <option value="xml"> XML </option> 
      </select> 
      <br></br> 
      <div id="output"></div> 
     </form> 
     <textarea id="raw"></textarea> 
    </body> 

    <script> 
     $.get("http://localhost:8080/profiles",function (profile_names) { 
      $.each(profile_names, function (i, pname) { 
       $("#profiles").append("<option>" + pname + "</option>"); 
      }); 
     }, "json"); 
     $("#formats, #profiles").change(function() { 
      var format = $("#formats").val(); 
      $.get("http://localhost:8080/profile/" + $("#profiles").val() + "." + format, 
       function (profile, stat, jqXHR) { 
        var cT = jqXHR.getResponseHeader("Content-Type"); 
        $("#raw").val(profile); 
        $("#output").html(''); 
        if (cT === "application/json") { 
         $.each($.parseJSON(profile), function (k, v) { 
          $("#output").append("<b>" + k + "</b> : " + v + "<br>"); 
         }); 
         return; 
        } 

        if (cT === "application/xml") { 
         xmlDoc = $.parseXML(profile), 
         $xml = $(xmlDoc); 
         $($xml).each(function(){ 
          $("#output").append($(this).text() + "<br/>"); 
         }); 
        } 
       }, 
      "text"); 
     }); 
    </script> 
</html>

其次，server.js文件

var http = require('http'); 
var fs = require('fs'); 
var path = require('path'); 
var profiles = require('./profiles'); 
var xml2js = require('xml2js'); 

var index = fs.readFileSync('index.html'); 
var routes, mimes = {xml: "application/xml", json: "application/json"} 

function output(content, format, rootNode) { 
    if (!format || format === 'json') { 
     return JSON.stringify(content); 
    } 
    if (format === 'xml') { 
     return (new xml2js.Builder({rootName: rootNode})).buildObject(content); 
    } 
} 

routes = { 
    'profiles': function (format) { 
     return output(Object.keys(profiles), format); 
    }, 
    '/profile': function (format, basename) { 
     return output(profiles[basename], format, basename); 
    } 
}; 

http.createServer(function (request, response) { 
var dirname = path.dirname(request.url), 
    extname = path.extname(request.url), 
// $.get('http://localhost:8080/profile/' + $('#profiles').val() + '.' + format 
    basename = path.basename(request.url, extname); 

    extname = extname.replace('.', ''); //remove period 


    response.setHeader("Content-Type", mimes[extname] ||'text/html'); 

    if (routes.hasOwnProperty(dirname)) { 
     response.end(routes[dirname](extname, basename)); 
     return; 
    } 
    if (routes.hasOwnProperty(basename)) { 
     response.end(routes[basename](extname)); 
     return; 
    } 
    response.end(index);  
}).listen(8080);

下面

是profiles.js文件

module.exports = { 
    ryan: { 
     name: "Ryan Dahl", 
     irc: "ryah", 
     twitter: "ryah", 
     github: "ry", 
     location: "San Francisco, USA", 
     description: "Creator of node.js" 
    }, 
    isaac: { 
     name: "Isaac Schlueter", 
     irc: "isaacs", 
     twitter: "izs", 
     github: "isaacs", 
     location: "San Francisco, USA", 
     description: "Former project gatekeeper, CTO npm, Inc." 
    } 
};

在index.html文件，

经过if（cT ===“application/xml”）{与JSON相比无法正常工作。

其实，原来的示例代码是这样

if (cT === "application/xml") { 
    profile = jqXHR.responseXML.firstChild.childNodes; 
    $.each(profile, function (k, v) { 
    if (v && v.nodeType === 1) { 
     $("#output").append("<b>" + v.tagName + "</b> : " + v.textContent + "<br>"); 
    } 
});

但高于一个没有工作，所以我搜索的方式来显示所有在

选择一个子节点和文本。

是否有任何方式让XML显示与在index.html文件中选择的JSON相同的格式？

谢谢你理解dissy问题！

来源

2014-09-04 MinLoveSu

不是'$ xml.children（）'你想迭代什么？正如你在这里试图遍历应该是单一的根元素。顺便说一句'$ xml'已经是一个jQuery元素了，可能为什么以$为前缀，所以不需要重新包装$ $（$ xml）'这已经足够了'$ xml' – GillesC 2014-09-05 00:04:58

@gilesc我发现了一种新的显示方式他们的每个子元素名称和文本。你可以看到这个问题的答案。和大约$（$ xml）的东西，我只是参考[链接]（http://api.jquery.com/jQuery.parseXML/）在这里。我不知道确切的原因。 – MinLoveSu 2014-09-05 18:46:19

我发现了我想要显示的元素名称和文本。

if (cT === "application/xml") { 
    var xmlDoc =$.parseXML(profile); 
    var $xml = $(xmlDoc); 
    var kids = $xml.children().children(); 
    kids.each(function(){ 
     var tagName=this.tagName; 
     var val=$(this).text(); 
     $("#output").append("<b>" + tagName + "</b> : " + val + "<br>"); 
    });  
}

我不知道为什么，但当配置文件被解析为'tj'时，下面是结果。

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 
<tj> 
    <name>TJ Holowaychuk</name> 
    <irc>tjholowaychuk</irc> 
    <twitter>tjholowaychuk</twitter> 
    <github>visionmedia</github> 
    <location>Victoria, BC, Canada</location> 
    <description>Author of express, jade and many other modules</description> 
</tj>

因此，$ xml的第一个孩子是<tj> </tj>。所以我用了两次children（）方法，然后

我可以迭代所有<tj> </tj>e的孩子，然后打印孩子的姓名和文本。

是否有人可以清楚地解释我的代码

请让我知道。

谢谢。

来源

2014-09-05 19:54:15 MinLoveSu

使用jquery，我如何迭代xml中的每个节点？

回答

相关问题