如果引导列达到12,如何在jQuery中添加类行?
我有这个jquery代码,它将把图像附加到div容器中。如果列达到12,我只想添加div类行 谁能给我一个主意吗。先谢谢你如果引导列达到12,如何在jQuery中添加类行?,jquery,html,css,twitter-bootstrap-3,Jquery,Html,Css,Twitter Bootstrap 3,我有这个jquery代码,它将把图像附加到div容器中。如果列达到12,我只想添加div类行 谁能给我一个主意吗。先谢谢你 for (var i = 0, j = result.images.length; i < j; i++){ $("#imageContent").append("<div class='col-md-3'><img src='storage/uploaded/" + result.images[i].name + "' class='img
for (var i = 0, j = result.images.length; i < j; i++){
$("#imageContent").append("<div class='col-md-3'><img src='storage/uploaded/" + result.images[i].name + "' class='img-responsive img-thumbnail'></div>");
}
for(变量i=0,j=result.images.length;i
这是我的部门
<div class="container" id="imageContent" style="display: block;">
</div>
这是我当前的输出
<div class="container" id="imageContent" style="display: block;">
<div class="col-md-3">
<img src="storage/uploaded/attl1.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="storage/uploaded/attl2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="storage/uploaded/May 11, 2017.png" class="img-responsive">
</div>
<div class="col-md-3">
<img src="storage/uploaded/8.png" class="img-responsive">
</div>
<div class="col-md-3">
<img src="storage/uploaded/logo.png" class="img-responsive">
</div>
<div class="col-md-3">
<img src="storage/uploaded/a2la_logo.png" class="img-responsive">
</div>
<div class="col-md-3">
<img src="storage/uploaded/attl1.jpg" class="img-responsive">
</div>
</div>
但如果列达到12,我想添加Div类行
预期产量
<div class="container" id="imageContent" style="display: block;">
<div class="row">
<div class="col-md-3">
<img src="storage/uploaded/attl1.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="storage/uploaded/attl2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="storage/uploaded/May 11, 2017.png" class="img-responsive">
</div>
<div class="col-md-3">
<img src="storage/uploaded/8.png" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="storage/uploaded/logo.png" class="img-responsive">
</div>
<div class="col-md-3">
<img src="storage/uploaded/a2la_logo.png" class="img-responsive">
</div>
<div class="col-md-3">
<img src="storage/uploaded/attl1.jpg" class="img-responsive">
</div>
</div>
</div>
您需要使用另一个循环,包装当前循环,形成“类似分页器”的行为。第一个循环将计算需要的行数(图像数除以4,因为每行中有4列),内部循环将迭代4次以填充该行
for (index = 0 ; index < images.length / 4 ; index++) {
var row = document.createElement('div');
row.className="row";
for (j = index * 4 ; j < (index * 4) + 4 ; j++) {
var col = document.createElement('div');
$(col).addClass("col-md-4");
$(col).html('<img src="' + images[j] + '"/>');
$(row).append(col);
}
$('body').append(row);
}
for(索引=0;索引
您应该创建一个函数,计算容器最后一行的最后一个子类中有多少col-md-3
类
示例:$('.container.row:last child.col-md-4')。长度代码>
如果有4个以上的col-md-3
,请创建.row
元素并调用此函数
否则,添加$(“#imageContent”)。追加(“…”)代码>在最后一行的子项:-)您可以这样使用
for (var i = 0, j = result.images.length; i < j; i++){
if(i==0 || i%4 == 0)
{
var appendEl = $("<div class='row'></div>").appendTo("#imageContent");
}
$("<div class='col-md-3'><img src='storage/uploaded/" + result.images[i].name + "' class='img-responsive img-thumbnail'></div>").appendTo(appendEl);
}
for(变量i=0,j=result.images.length;i
检查js小提琴
更新:请查看屏幕截图您可以通过jQuery的wrapAll()函数实现这一点
我无法对此进行测试,但您的代码应如下所示:
for (var i = 0, j = result.images.length; i < j; i++) {
if (i % 4 == 0) {
$("#imageContent").append("<div class='col-md-3'><img src='storage/uploaded/" + result.images[i].name + "' class='img-responsive img-thumbnail'></div>");
$(".col-md-3").wrapAll("<div class='row' />");
}
else {
$("#imageContent").append("<div class='col-md-3'><img src='storage/uploaded/" + result.images[i].name + "' class='img-responsive img-thumbnail'></div>");
}
}
for(变量i=0,j=result.images.length;i
试试这个,可能会对你有所帮助
引导示例
调整浏览器窗口的大小以查看效果
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
$(文档).ready(函数(){
对于(变量i=0,j=10;i
-
-
-
我如何将其应用于我当前的回路,先生?抱歉,我在jqueryI中是新手。请尝试使用(index=0;index行时,您需要给它一个变量,然后将列添加到该变量中。您所做的只是创建行和行外的图像。让我编辑我的答案,使其更加明确…我尝试了您的代码,先生,它创建了一行,在第一行中有另一行有5个图像请检查快照&我添加了I
,而不是result.images[I]。name
&length是硬编码来创建示例的。现在检查是的,它在工作:)非常感谢你,先生。正是我在看的:)@GeninaAnneGabuten很高兴我能帮忙顺便问一下$(“#imageContent”).append(“”)到你的代码中?appendTo
返回新的元素,而不是#imageContent
(如果我使用append
方法)谢谢你,先生,你的答案和agam一样,也是正确的。是的,没问题,几乎相同的答案,但有明确的例子欢迎这么说,你的答案可能是正确的,但你必须提供一些解释来说明为什么它是正确的
<div class="row">
<?php $counter =0;
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'posts_per_page' => 4,
'paged' => $paged
);
$custom_query = new WP_Query( $args );
while($custom_query->have_posts()) :
$custom_query->the_post();
?>
<?php
if ( has_post_thumbnail()) {
$post_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
}
?>
<div class="col-md-4 col-sm-4">
<div class="latest-news">
<a href="<?php the_permalink(); ?>"><img src="<?php echo $post_image[0];?>" /></a>
<h4><?php echo get_the_date(); ?></h4>
<h3><?php the_title(); ?></h3>
<h5>
<?php $content= get_the_content();
echo $contentCut = substr($content, 0, 100).'...';
?>
</h5>
<ul>
<li>
<a href="#">By
<span><?php echo get_the_author(); ?></span> |</a>
</li>
<li>
<a href="#">comment
<span><?php echo get_comments_number(); ?></span> |</a>
</li>
<li>
<a href="#">Likes
<span><?php if (function_exists('wp_ulike_get_post_likes')){
$count= wp_ulike_get_post_likes(get_the_ID());
if($count > 0)
{
echo $count;
}
else
{
echo '0';
}
}
?>
</span>
</a>
</li>
</ul>
</div>
</div>
<?php
$counter++;
if($counter%3==0)
echo '</div><div class="row">';
endwhile;
?>
</div>