Question

我在页面上有一个图像滑块，用于读取名为＆＃34; slider.xml＆＃34;的XML文件。有点像这样：

<slider>
<slide>
<link>http://www.example.com/1</link>
<path>http://image.jpg</path>
</slide>
</slider>

有多个＆＃34;幻灯片＆＃34;元素，但由于空间原因我没有包括它们。我有一些看起来像这样的HTML：

<body>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</body>

我想阅读这个XML文件并编写＆＃34;链接＆＃34;属于＆＃34; div＆＃34; HTML页面上的元素作为标题属性。我希望它看起来像这样：

<body>
<div class="slide" title="http://www.example.com/1"></div>
<div class="slide" title="http://www.example.com/2"></div>
<div class="slide" title="http://www.example.com/3"></div>
<div class="slide" title="http://www.example.com/4"></div>
<div class="slide" title="http://www.example.com/5"></div>
</body>

到目前为止，我已经尝试了这个但是没有运气：

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "slider.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('slide').each(function(){
                var url = $(this).find('link').text();
                $('.slide').attr('title', url);
            }); 
        }   
    }); 
});

我在阅读XML文件时遇到问题，但在解析XML属性并将其附加到各种div之后遇到问题。我应该创建一个循环并将xml属性存储在数组中吗？有一个更好的方法吗？

另外，我无法编辑XML或HTML。

Answer 1

所有你的div都有相同的标题，因为你打电话给$('.slide')选择它们。

这应该有效：

$(document).ready(function () {
    var slide = $('.slide');
    $.ajax({
        type: "GET",
        url: "slider.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('slide').each(function(i){
                var url = $(this).find('link').text();
                slide.eq(i).attr('title', url);
            }); 
        }   
    }); 
});

使用JQuery读取XML文件并将XML属性写入网页上的一系列HTML元素

1 个答案: