如何使用 jQuery 将 XML 文件的内容按顺序加载到 HTML 中

Question

如何使用 jQuery 读取名为 music.xml 的 XML 文件内容中的第一项，将其在 DIV 中显示五秒钟，读取下一个 XML 项并显示五秒钟，循环遍历 XML 文件，然后从头开始？

HTML：

<div id="music">
    <div id="albumcover"></div>
    <div id="songdescription"></div>
</div>

音乐.xml

<songs>
    <item>
        <image>music_01.jpg</image>
        <description>Description of first song</description>
    </item>
    <item>
        <image>music_02.jpg</image>
        <description>Description of second song</description>
    </item>
    <item>
        <image>music_03.jpg</image>
        <description>Description of third song</description>
    </item>
</songs>

Answer 1

尝试这样的操作：

$.ajax({
  'dataType': 'xml',
  'success': function(xml)
  {
    $(xml).find('item').each(function()
    {
      var image = $(this).find('image').text();
      var description = $(this).find('description').text();

      $('<div id="music" />')
        .append($('<div id="albumcover" />').append($('<img />').attr('src', image)))
        .append($('<div id="songdescription" />').text(description))
        .appendTo('body');
    });

    // Add the code for the carousel here.
  },
  'type': 'get',
  'url': 'music.xml'
});

您必须调整路径（xml 文件和图像所在的位置）以及您希望将其添加到文档中的位置。目前，它将附加在结束 BODY 元素之前。

然后，我建议寻找一个轮播 jQuery 插件，它将轮流浏览它们，而不是您必须处理它的那部分。您应该查看 jCarousel Lite。

Answer 2

首先，我知道如何使用 jQuery 解析这些内容的方式会给 image 标签带来问题（edit: 仅当您解析文本时；XML 结果是没问题的） ），因为一旦你将它包装在 jQuery 中，它就会将 text 转换为 text。你可以处理这个问题，但这并不漂亮。因此，假设您已将 重命名为 。

工作 jsFiddle，减去 $.ajax 请求部分。

var music = [];
var musicIndex = -1;
var delay = 5000;
var intervalId; // in case you want to clearInterval
var $cover = $("#albumcover");
var $desc = $("#songdescription");

function rotateMusic() {
  // Loop back to the beginning if necessary
  if (++musicIndex === music.length) {
    musicIndex = 0;
  }
  console.log(music[musicIndex].cover);

  // Create a new image, tell it to append itself and description
  // once it's loaded, tell it to load
  $("<img>").load(function() {
    $cover.empty().append($(this));
    $desc.text(music[musicIndex].desc);
  }).attr("src", music[musicIndex].cover);
}

$.ajax({
  type: "GET",
  url: "music.xml",
  dataType: "xml",
  success: function(xml) {
             // Parse each item as a node
             $(xml).find('item').each(function() {
               // Add contents of item to music array
               var $item = $(this);
               music.push({
                 cover: $item.find('image').text(),
                 desc: $item.find('description').text()
               });

             });
             // Start rotating music, then set it to a delay
             rotateMusic();
             intervalId = setInterval(rotateMusic, delay);
           }
});