3

我在一个页面上有一个图像滑块，它读取一个名为“slider.xml”的 XML 文件，看起来像这样：

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

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

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

我想读取这个 XML 文件并将“链接”属性写入 HTML 页面上的“div”元素作为标题属性。我希望它看起来像这样：

<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。

4

1 回答 1

2

你所有的 div 都将具有相同的标题，因为你调用$('.slide')which 将它们全部选中。

这应该有效：

$(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);
            }); 
        }   
    }); 
});
于 2012-10-03T20:13:49.430 回答