im trying to wrap the img + p elements in one div, but for some reason all the elements created in each div... what am i doing wrong ?
<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");
});
});
i want it to look like this :
<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>