1

XML データ バインディングを使用してサムネイル ギャラリーを作成しようとしています。しかし、データは拘束力がありません。これが私が試しているものです。

http://jsfiddle.net/5wETg/

ここでは、HTML で使用した画像タグを 1 つだけ使用して、XML にある 3 つの画像すべてを表示したいと考えています。

4

2 に答える 2

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');
});​
于 2012-08-24T07:20:08.693 に答える
0

<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/

于 2012-08-24T07:18:08.780 に答える