Question

我有这个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-responsive img-thumbnail'></div>");
}

这里是我的div

<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>

Answer 1

你需要使用另一个循环，包装你当前的循环，制作一个类似于paginator的＆＃34;＆＃34;行为。第一个循环将计算您需要的行数（图像数除以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);
}

Answer 2

您应该创建一个函数，用于计算容器最后一行的col-md-3中有多少last-child个类。

示例：$('.container .row:last-child .col-md-4').length;

如果col-md-3超过4个，请创建.row元素并调用此函数否则，在最后一行子项中添加$("#imageContent").append("<div class='col-md-3'>...");： - ）

Answer 3

你可以这样使用

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);
}

检查js fiddle https://jsfiddle.net/9Lrg2ecq/

更新：请检查屏幕截图https://ibb.co/fzcR6Q

Answer 4

您可以使用jQuery的wrapAll（）函数实现此目的。 http://api.jquery.com/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>");
            }
        }

Answer 5

试试这个，可能会对你有帮助。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

  <p>Resize the browser window to see the effect.</p>
  <div  id="new_row">
  <div class="row">
    <div class="col-md-3 col-sm-3 col-xs-3" style="background-color:yellow;">
      Lorem ipsum dolor sit amet
    </div>
    <div class="col-md-3 col-sm-3 col-xs-3" style="background-color:green;">
      Lorem ipsum dolor sit amet
    </div> 
    <div class="col-md-3 col-sm-3 col-xs-3" style="background-color:orange;">
      Lorem ipsum dolor sit amet
    </div> 
    <div class="col-md-3 col-sm-3 col-xs-3" style="background-color:red;">
      Lorem ipsum dolor sit amet
    </div> 
  </div>
  </div>
</div>
<script>
$( document ).ready(function() { 

for (var i = 0, j = 10; i < j; i++){

if(i==0 || i%4 == 0)
{
   var appendEl = $("<div class='row'></div>").appendTo("#new_row");
}
    $("</div><div class='col-md-3 col-sm-3 col-xs-3'><img src='storage/uploaded/" + i + "' class='img-responsive img-thumbnail'></div>").appendTo(appendEl);
}
});
</script>
</body>
</html>

＆＃13;

Answer 6

       <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>

如果bootstrap列达到12，如何在jQuery中添加类行？

6 个答案: