2013-10-15 48 views
0

即時通訊設法將img + p元素封裝在一個div中,但由於某種原因,所有在每個div創建的元素 ...我做錯了什麼?JQuery的jQuery - 獲取圖像

<script type="text/javascript"> 
    var url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=**myAPI**&tags=**myTAG**&per_page=20 "; 
    var src; 
    $.getJSON(url + "&format=json&jsoncallback=?", function (data) { 
     $.each(data.photos.photo, function (i, item) { 
      src = "http://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_m.jpg"; 
      $("<div class='test'></div>").appendTo(".wrap"); 
      $("<img/>").attr("src", src).attr("class", "titleBox").appendTo(".test"); 
      $('<p>', { class: 'titleBox', text: item.title }).appendTo(".test"); 
     }); 
    }); 

我希望它看起來像這樣:

<div class="wrap"> 
<div class="test"> 
<img src="#"/> 
<p>some text</p> 
</div> 
<div class="test"> 
    <img src="#"/> 
    <p>some text</p> 
</div> 
<div class="test"> 
<img src="#"/> 
<p>some text</p> 
</div> 
</div> 
+0

你可以發佈由api返回的json嗎? – Praveen

回答

0

添加一個id的div是這樣的:

$.each(data.photos.photo, function (i, item) { 
     src = "http://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_m.jpg"; 
     $("<div class='test' id='test" + i.toString() + "'></div>").appendTo(".wrap"); 
     $("<img/>").attr("src", src).attr("class", "titleBox").appendTo("#test" + i.toString()); 
     $('<p>', { class: 'titleBox', text: item.title }).appendTo("#test" + i.toString()); 
    }); 
0

當你追加到.test,你不指定去哪個.test,因此它會自動取第一個元素。您的.each索引,使用它:

$("<img/>").attr("src", src).attr("class", "titleBox").appendTo(".test:eq(" + i + ")"); 
$('<p>', { class: 'titleBox', text: item.title }).appendTo(".test:eq(" + i + ")"); 
0

你所有的div具有相同的類「測試」和你正在使用這個類作爲選擇器在appendTo(「。test」), 因此,自選擇器條件滿足以來,所有元素都會附加到第一個div。

解決方案: 在appendTo(「#id」)中使用「id」作爲選擇器,它唯一標識div。 (你可以使用循環中的計數作爲id)