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

Question

How do I use jQuery to read the first item in the contents of an XML file called music.xml, display them in a DIV for five seconds, read the next XML item and display that for five seconds, loop through the XML file and then从头再来？

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 元素之前为 append 。

然后，我建议寻找一个旋转木马 jQuery 插件，它会在它们之间旋转，而不是你必须处理它的那一部分。 您应该查看jCarousel Lite 。

Answer 2

首先，我知道如何使用 jQuery 解析这些的方式会给image标签带来问题（编辑：仅当您解析文本时；XML 结果很好），因为一旦您将它包装在 ZF590B4FDA2C30BE28DD3C8 中，它将转换<image>text</image> BimageC37 <image>text</image>到<img>text 。 你可以处理它，但它并不漂亮。 因此，假设您已将<image>重命名为<cover> 。

工作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);
           }
});