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

Question

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

http://jsfiddle.net/5wETg/

在这里，我想仅使用我在 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];
    })
);

演示

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