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

【问题标题】：XML Data Image Binding for thumbnail Gallery缩略图库的 XML 数据图像绑定
【发布时间】：2012-08-24 06:57:36
【问题描述】：

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

http://jsfiddle.net/5wETg/

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

【问题讨论】：

一个图片标签中不能有3张图片
@Musa: 有什么替代的解决方案，因为如果图像越来越多，我们每次都需要更新

标签： javascript jquery xml xml-parsing

【解决方案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');
});

【讨论】：

【解决方案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/

【讨论】：