我试图将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>
答案 0 :(得分: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 + ")");
答案 1 :(得分:0)
为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 :(得分:0)
你所有的div都有相同的类“test”,你在appendTo(“。test”)中使用这个类作为选择器, 因此,所有元素都会附加到第一个div,因为符合选择器条件。
解决方案: 在appendTo(“#id”)中使用“id”作为选择器,它唯一地标识div。 (您可以将循环计数用作id)