What is the best way to incorporate the class "row" in jQuery when a bootstrap column reaches a total

Question

What is the best way to incorporate the class "row" in jQuery when a bootstrap column reaches a total

In my jQuery code, I am appending images inside a div container. I need help adding a div class row when the column count reaches 12.

Any suggestions would be greatly appreciated. Thank you in advance!

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

Here is my current div structure:

<div class="container" id="imageContent" style="display: block;">

</div>

Current output:

<div class="container" id="imageContent" style="display: block;">
    ... (images here)
</div>

I want to add a Div class row when the column reaches 12 for the expected output:

<div class="container" id="imageContent" style="display: block;">
  <div class="row">
    ... (first set of images here)
  </div>
  <div class="row">
    ... (second set of images here)
  </div>
</div>

jquery html css twitter-bootstrap-3

Answer 1

Answer №1

Here is a method you can use:

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 more details, please refer to this js fiddle https://jsfiddle.net/9Lrg2ecq/

To see the updated version, take a look at this screenshot https://ibb.co/fzcR6Q

Answer 2

Here is a method you can use:

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 more details, please refer to this js fiddle https://jsfiddle.net/9Lrg2ecq/

To see the updated version, take a look at this screenshot https://ibb.co/fzcR6Q

Answer 3

Answer №2

A helpful tip is to develop a function that can track how many instances of the col-md-3 class are present in the last child of the final row within your container.

For example:

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

If there happen to be more than 4 occurrences of the col-md-3 class, then go ahead and create a new .row element and rerun this function. But if not, simply include

$("#imageContent").append("<div class='col-md-3'>...");

at the end of the last row child :-)

Answer 4

A helpful tip is to develop a function that can track how many instances of the col-md-3 class are present in the last child of the final row within your container.

For example:

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

If there happen to be more than 4 occurrences of the col-md-3 class, then go ahead and create a new .row element and rerun this function. But if not, simply include

$("#imageContent").append("<div class='col-md-3'>...");

at the end of the last row child :-)

Answer 5

Answer №3

One way to accomplish this is by using the wrapAll() function in jQuery. More information can be found at http://api.jquery.com/wrapall/

Although I haven't been able to test it, your code should look something like this:

for (var x = 0, y = result.images.length; x < y; x++) {
            if (x % 4 == 0) {
                $("#imageContent").append("<div class='col-md-3'><img src='storage/uploaded/" + result.images[x].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[x].name + "' class='img-responsive img-thumbnail'></div>");
            }
        }

Answer 6

One way to accomplish this is by using the wrapAll() function in jQuery. More information can be found at http://api.jquery.com/wrapall/

Although I haven't been able to test it, your code should look something like this:

for (var x = 0, y = result.images.length; x < y; x++) {
            if (x % 4 == 0) {
                $("#imageContent").append("<div class='col-md-3'><img src='storage/uploaded/" + result.images[x].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[x].name + "' class='img-responsive img-thumbnail'></div>");
            }
        }

Answer 7

Answer №4

Check out this code snippet, it might be able to assist you:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example using Bootstrap</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>Try resizing 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>

Answer 8

Check out this code snippet, it might be able to assist you:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example using Bootstrap</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>Try resizing 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>

Answer 9

Answer №5

To achieve a "paginator-like" behavior, you will need to implement another loop that surrounds your current one. The initial loop will calculate the number of rows needed (the total number of images divided by 4 since there are 4 columns in each row), while the inner loop will run 4 times to populate each row.

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 10

To achieve a "paginator-like" behavior, you will need to implement another loop that surrounds your current one. The initial loop will calculate the number of rows needed (the total number of images divided by 4 since there are 4 columns in each row), while the inner loop will run 4 times to populate each row.

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 11

Answer №6

       <div class="container">
            <?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-post">
                    <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 $contentTrimmed = substr($content, 0, 100).'...';
                        ?>
                    </h5>
                    <ul>
                        <li>
                            <a href="#">Posted by
                                <span><?php echo get_the_author(); ?></span> |</a>
                        </li>
                        <li>
                            <a href="#">Comments
                                <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>

Answer 12

       <div class="container">
            <?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-post">
                    <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 $contentTrimmed = substr($content, 0, 100).'...';
                        ?>
                    </h5>
                    <ul>
                        <li>
                            <a href="#">Posted by
                                <span><?php echo get_the_author(); ?></span> |</a>
                        </li>
                        <li>
                            <a href="#">Comments
                                <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>

What is the best way to incorporate the class "row" in jQuery when a bootstrap column reaches a total

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Updating a DIV in JQuery with a new URL submitted through a form

"Transforming a div's data-src to an image_tag in Django - A Step-by-

Having trouble bringing in css files

Issue with child rows not functioning properly in DataTables when utilizing Datetime-moment

What causes delays in transition for 'margin' and 'padding' in webkit browsers?

In what way does Angular incorporate _page-theme.scss assets?

Convert an AJAX JSON object into values for multiple text boxes

Tips for sending query string parameters to an AJAX request using data

Understanding how to retrieve a particular list item in JQuery without having the index in advance

Is the next function triggered only after the iframe has finished loading?

Padding problem arises when you wrap an image with an anchor tag

Tips for retrieving selected items in an array object

Using jQuery dialog to load a form through AJAX and then submitting the form to the modal dialog

Tips for choosing a parent element using SCSS

What sets flex-start apart from baseline?

Feature allowing simultaneous playback of several audio files when activated within Aframe webVR

A Step-by-Step Guide to Setting Up a Scoreboard for Your Rock Paper Scissors Game

Blog Format Featuring Side-by-Side Columns

The ngOnChanges lifecycle hook is not being triggered

What is the best way to ensure that the correct Url.Action is passed to a JQuery method without encountering any issues with extra amp