带有 json 的 jquery - 获取图像答案

【问题标题】：jquery with json - getting images带有 json 的 jquery - 获取图像
【发布时间】：2013-10-23 07:04:08
【问题描述】：

我试图将 img + p 元素包装在一个 div 中，但由于某种原因，在 每个 div 中创建的所有元素......我做错了什么？

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

【问题讨论】：

可以把api返回的json贴出来吗？

标签： jquery html json dynamic flickr

【解决方案1】：

给 div 添加一个 id，比如：

$.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());
     });

【讨论】：

【解决方案2】：

当您附加到.test 时，您没有指定要转到哪个.test，因此它会自动获取第一个元素。你的.each 中有一个索引，使用它：

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

【讨论】：

【解决方案3】：

你所有的 div 都有相同的类“test”，你在 appendTo(".test") 中使用这个类作为选择器，因此，自从满足选择器条件后，所有元素都会附加到第一个 div。

解决方案：在 appendTo("#id") 中使用“id”作为选择器，这可以唯一标识 div。（可以使用循环中的计数作为id）

【讨论】：