[英]How does one embed components with div's on jQuery .each()?
我正在嘗試建立一個照相館,該照相館從flickr中提取照片,並用文本框顯示每張照片。 我想要下面的代碼,其中div class ='col-sm-6 col-md-4 center'和所有子關系在div class =“ row”內重復。
<div id="body" style="padding-top: 60px;">
<div class="row">
<!-- Section to repeat -->
<div class='col-sm-6 col-md-4 center'>
<div class='thumbnail'>
<div id="gallery"></div> <!-- Photos go here -->
<div class='input-group'>
<!-- textbox and button -->
<input type='text' class='form-control' placeholder='#tag'>
<span class='input-group-btn'>
<button class='btn btn-default' type='button'>Tag!</button>
</span>
</div>
</div>
</div>
<!-- Above section repeats here 6 times -->
</div><!--./row -->
</div><!--./body -->
我壁櫥里的Javascript是:
<script>
(function() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var tagForm = "<span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>";
$.getJSON( flickerAPI, {
tags: "porsche",
tagmode: "any",
format: "json"
})
.done(function( data ) {
$.each( data.items, function( i, item ) {
$( "<img>" ).attr( "src", item.media.m ).appendTo( "#gallery" );
$( "#gallery" ).append( tagForm );
if ( i == 5 ) {
return false;
}
});
});
})();
</script>
這將拉出照片,但文本框和按鈕將在照片的右側,而不是下面。 我知道問題出在不包括前2個div,但是,我不知道如何將照片和文本框/按鈕嵌入縮略圖和col-sm-6挖掘中。
任何幫助都將是驚人的! 提前謝謝。
如果您希望每個圖像都帶有自己的標簽按鈕進入#gallery,則如果將圖像分組並跨在元素內,則樣式設置會容易得多。
示例輸出:
<div class="gallery">
<div class="img-box">
<img src="something.jpg">
<span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>
</div>
</div>
<script>
(function() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var tagForm = "<span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>";
// store this so we dont look it up every iteration
var $gallery = $("#gallery");
$.getJSON( flickerAPI, {
tags: "porsche",
tagmode: "any",
format: "json"
})
.success(function( data ) {
$.each( data.items, function( i, item ) {
// create a div to stuff img and tag in
var $img_box = $('<div class="img-box">');
$( "<img>" ).attr( "src", item.media.m ).appendTo( $img_box );
$img_box.append( tagForm ).appendTo($gallery)
if ( i == 5 ) {
return false;
}
});
});
})();
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.