如何使用外部xml文件中的Jquery .load进行循环

时间:2015-10-07 16:59:11

标签: jquery xml loops

我试图访问存储在同一域中的外部xml并使用jquery .load,我想在其余节点中进行循环。

问题:我只能使用.load检索1个节点。

这是我的外部xml

<?xml version="1.0" encoding="UTF-8" ?> 
<Main_List>
<links>
      <header>Header 1</header> 
    - <link_items>
      <url_label>URL Label 1</url_label> 
      <url>http://stackoverflow.com</url> 
      <url_target>_self</url_target> 
      </link_items>
      <link_items>
      <url_label>URL Label 2</url_label> 
      <url>http://stackoverflow2.com</url> 
      <url_target>_self</url_target> 
      </link_items>
      <link_items>
      <url_label>URL Label 3</url_label> 
      <url>http://stackoverflow3.com</url> 
      <url_target>_self</url_target> 
      </link_items>
      <link_items>
      <url_label>URL Label 4</url_label> 
      <url>http://stackoverflow4.com</url> 
      <url_target>_self</url_target> 
      </link_items>
  </links>
  </Main_List>

这是我的剧本

$( "#header" ).load("main_list.xml header"); 
    $( "#url_label" ).load("main_list.xml url_label");

    // load url to temp div, then set as variable and to change attributes
    $('#temp').load("main_list.xml url", function(url) {
    var getNode_url = $('#temp').text();
    jQuery('#url_label').attr('href',getNode_url);
    });

这是我的目标div

<div id="header"></div>
<a id="url_label></a><br>
<div id="temp" style="display:none"></div>

我的预期结果应为

Header 1
<a href="http://stackoverflow.com" target="_self">URL Label 1</a>
<a href="http://stackoverflow2.com" target="_self">URL Label 2</a>
<a href="http://stackoverflow3.com" target="_self">URL Label 3</a>
<a href="http://stackoverflow4.com" target="_self">URL Label 4</a>

1 个答案:

答案 0 :(得分:1)

尝试使用$.get()$.parseXML()

$.post("/echo/html/", {
      html: $("pre")[0].innerHTML
  }, function (response) {
      var xml = $($.parseXML(response)).find("main_list");
      xml.find("header").appendTo("#header");
      xml.find("link_items").each(function (i, el) {
          // do stuff with `link_items` elements
          var a = $("<a />", {
              "href": $(el).find("url").text(),
                  "target": $(el).find("url_target").text(),
                  "html": $(el).find("url_label").text() + "<br />"
          });
          $("#temp").append(a)
      })
  })

jsfiddle http://jsfiddle.net/9r3o4v9c/5/