使用JQuery讀取XML文件並將XML屬性寫入網頁上的一系列HTML元素

Question

我在頁面上有一個圖像滑塊，它讀取名為“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文件，並將“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>

到目前為止，我已經嘗試了這個，但沒有運氣：

$(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 個解決方案

解決方案1
2 已采納 2012-10-03 20:13:49

使用JQuery讀取XML文件並將XML屬性寫入網頁上的一系列HTML元素

問題描述

1 個解決方案

解決方案1 2 已采納 2012-10-03 20:13:49

解決方案1
2 已采納 2012-10-03 20:13:49