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

I have an image slider on a page that reads an XML file called "slider.xml" that kinda looks like this:

我在页面上有一个图像滑块，它读取名为“slider.xml”的XML文件，如下所示：

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

There's multiple "slide" elements but I didn't include them for space reasons. I have some HTML that looks like this:

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

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

I want to read this XML file and write the "link" attribute to the "div" elements on an HTML page as a title attribute. I want it to look like this:

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

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

So far I have tried this but haven't had any luck:

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

$(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);
            }); 
        }   
    }); 
});

I don't have issues reading the XML file, but run into problems after I parse the XML attributes and attach it to the various divs. Should I create a loop and store the xml attributes in an array? Is there a better way to do this?

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

Also, I cannot edit the XML or HTML.

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

1 个解决方案

#1

All your divs will have the same title since you call $('.slide') which select them all.

所有你的div都有相同的标题，因为你调用$（'。slide'）来选择它们。

This should work:

这应该工作：

$(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);
            }); 
        }   
    }); 
});

#1