如何在jQuery .each()上嵌入带有div的组件？
如何在jQuery .each()上嵌入带有div的组件？
提问于 2013-11-12 20:09:44
我试图建立一个图片库，从flickr中提取照片，并用文本框显示每一张照片。我希望有以下代码，其中div类=‘class 6 col-md-4中心’和所有子关系重复在div class=“行”内。
<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 -->我在壁橱里得到的文字记录是：
<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个dig没有包括在内，但是，我不知道如何嵌入照片和文本框/按钮在缩略图和col 6的挖掘。
任何帮助都会是惊人的！提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-11-12 21:13:14
如果您希望每个图像都使用自己的标记按钮进入#图库，那么如果将图像和跨度分组在元素中，那么样式就会容易得多。
示例输出：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19938921
复制相关文章
相似问题
腾讯云开发者
