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

XML Data Image Binding for thumbnail Gallery

本文关键字：数据 图像 绑定 XML 略图      更新时间：2023-09-26

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

http://jsfiddle.net/5wETg/

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

你不能用这个吗？

<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');
});​

您可以为每个图像创建一个<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/

相关文章：