Question

我正在尝试使用XML数据绑定创建缩略图库。但数据没有约束力。这是我正在尝试的那个。

在这里，我想使用我在HTML中使用的一个图像标记来显示XML中的所有三个图像。

Answer 1

你不能用这个吗？

<div id="thumbs"></div>

脚本：

var xml = "<rss version='2.0'><channel><image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image><image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image><image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>    </channel></rss>",

    xmlDoc = $.parseXML( xml ),
    $xml = $( xmlDoc ),
    $image= $xml.find( "image" );



$($image).each(function(index, element) {
    $( "<img />" ).attr('src', $(element).text()).appendTo('#thumbs');
});

Answer 2

您可以为每个图片创建一个<img>标记，我使用.map()创建一个包含所有图像的jQuery对象，然后将它们附加到#thumbs

var xml = "<rss version='2.0'>\
    <channel>\
    <image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>\
    <image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>\
    <image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>\
    </channel>\
    </rss>",
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$image= $xml.find( "image" );

$( "#thumbs" ).append( $image.map(function(){
        return $('<img>', {className: 'thumbnails', src:$(this).text()})[0];
    })
);

DEMO

http://api.jquery.com/map/

缩略图库的XML数据图像绑定

2 个答案: