xmlとjqueryを使用して同じノードに画像セットをロードする

Question

サムネイルをクリックすると、自分のノードに対応する複数の画像をロードしようとしています。

クリックすると1画像を読み込むことができますが、複数の画像を読み込む必要があります。私は

xmlでサムネイル画像を読み込んでいます。

var $container = $('.window_body'); 
var images = new Array(); 
var id = 0; 
init(); 

function init() { 
    $('<div class = "thumbnail_layout layout_type"></div>').appendTo('.window_body'); 
    $.get('sites.xml', function (d) { 
     $(d).find('site').each(function (i, l) { 
      var imageUrl = $(this).find('imgurl').text(); 
      var title = $(this).find('title').text(); 
      var url = $(this).find('url').text(); 
      var brief = $(this).find('brief').text(); 
      var long = $(this).find('long').text(); 
      var classa = $(this).find('_class').text(); 
      images[i] = $(this).find('img').text(); 
      $('<div id="' + "p" + i + '" class="' + classa + '"></div>').html('<a> <img src="' + imageUrl + '" class="thumbnail" />' + '<h1>' + title + '</h1> </a>').appendTo('.thumbnail_layout'); 
     }); 
     $(".item").click(function() { 
      var index = $(this).prevAll().length; 
      var datelength = $(".item").length 
      for(var i = 0; i <= datelength; i++) { 
       if(i == index) { 
        $("#holder").empty(); 
        $("#holder").prepend('<img id="my_img" src="' + images[i] + '" />'); 
       } else {} 
      } 
     }); 
    }) 
} 

XML：次に

 images[i] = $(this).find('img').text(); 

：

<?xml version="1.0" encoding="iso-8859-1"?> 
<sites> 
    <site> 
     <imgurl>images/thumbnail_big_a.jpg</imgurl> 
     <title>test</title> 
     <url>http://www.1.com</url> 
     <desc> 
      <brief>brief description.</brief> 
      <long>long description</long> 
     </desc> 
     <bimgurl> 
      <img>images/thumbnail_big_a.jpg</img> 
      <img>images/thumbnail_big_b.jpg</img> 
      <img>images/thumbnail_big_a.jpg</img> 
     </bimgurl> 
     <_class>item red</_class> 
    </site> 
</sites> 

Answer 1

あなたはだけでなく、テキストのあなたは$（この）.find（ 'IMG'）から取得したノードセットを格納することができクリックハンドラでは次のようにします：

images[i].each(function() { 
    $("#holder").prepend('<img id="my_img" src="' + $(this).text + '" />'); 
};