Question

我正在制作一些应用程序，它从xml文件加载数据。如果有一个相应的div结构和一个xml路径，它的工作文件。但我想拥有我的div结构的多个副本，但每个都会加载不同的xml内容。我厌倦了循环，但它确实复制了两个内容中的每个数据。

HTML：

<div class="data" data-xml="https://dl.dropboxusercontent.com/u/33538012/file1.xml">
</div>
<div class="data" data-xml="https://dl.dropboxusercontent.com/u/33538012/file2.xml">
</div>

jQuery的：

$(".data").each(function() {
  var path = $(this).attr("data-xml");
  $.ajax({
    url: path,
    dataType: "xml",
    success: parse,
    error: function() {
      alert("Error: Something went wrong with loading the playlist!");
    }
  });

});

function parse(document) {
  $(document).find("person").each(function() {
    $(".data").append(
        "<div class='name'>Name: " +
        $(document).find("name").text() +
        "</div><div class='title'>Title: " +
        $(document).find("title").text() + "</div>")
      //$(document).find("name").text();
  });
}

正如您在HTML中看到的，我有完全相同的结构，但每个都链接到不同的xml文件路径。在我的代码中，我想基于它们链接到的xml文件加载相应的数据。

更新

根据@charlietfl提供的答案，代码现在似乎更好，但仍然没有提供预期的结果。我一直在测试下面的代码，并意识到它没有将xml实例传递给parse函数。

$(".data").each(function() {
  // store element instance 
  var elem = $(this);
   var path = $(this).attr("data-xml");
    //console.log($el);

  $.ajax({
    url: path,
    dataType: "xml",
    success: function(xml){
        parse(document, elem);
    },
    error: function() {
      alert("Error: Something went wrong with loading the playlist!");
    }
  });

});

function parse(document, elem) {
console.log($(document).find("name").text());

  $(document).find("person").each(function() {
    //alert($el);
    var $person = $(this);
    elem.append(
      "<div class='name'>Name: " +
      $person.find("name").text() +
      "</div><div class='title'>Title: " +
      $person.find("title").text() + "</div>")

  });
}

有什么想法吗？

Answer 1

这应该这样做。您需要将元素实例存储在ajax之外，并将其传递给成功处理

$(".data").each(function() {
  // store element instance 
  var $el = $(this),
    path = $(this).attr("data-xml");

  $.ajax({
    url: path,
    dataType: "xml",
    success: function(xml) {
      parse(document, $el);
    },
    error: function() {
      alert("Error: Something went wrong with loading the playlist!");
    }
  });

});

function parse(document, $el) {
  $(document).find("person").each(function() {
    var $person = $(this);
    $el.append(
      "<div class='name'>Name: " +
      $person.find("name").text() +
      "</div><div class='title'>Title: " +
      $person.find("title").text() + "</div>")

  });
}

如何使用相同的重复div结构，但在每个div中解析不同的xml数据

1 个答案: