关闭引导行并在每第n个包含div的行之后开始新行 [英] Close a bootstrap row and start new row after every nth containing div

问题描述

我有一个引导行，该行将由博客帖子缩略图填充.

I have a bootstrap row which will be populated by, let's say, blog post thumbnails.

<section class="container">
  <div class="row thumbs">
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
  </div>
  <hr class="divider" />
  <div class="navigation">navigation</div>
</section

我想在每第4个发布缩略图之后关闭一行，插入hr标签并打开一个新的引导行.

I want to close a row, insert hr tag and open a new bootstrap row after every 4th post thumbnail.

<section class="container">
  <div class="row thumbs">
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
  </div>
  <hr class="divider" />
  <div class="row">
    <div class="col-sm-3">content</div>
  </div>
  <hr class="divider" />
  <div class="navigation">navigation</div>
</section>

有没有办法用jquery做到这一点?

Is there a way to do this with jquery?

推荐答案

可以执行以下操作:

var $mainElem = $('.row'),/* adjust selector to suit page*/
    $parent = $mainElem.parent(),
    /* remove children after 4th from existing row */
    $items = $mainElem.children(':gt(3)').detach();

if ($items.length) {
    /* create new row for every 4 items removed above */
    for (var i = 0; i < $items.length; i = i + 4) {
        var $row = $('<div class="row">').append($items.slice(i, i + 4));
        $parent.append('<hr class="divider">').append($row);    
    }
}

演示

这篇关于关闭引导行并在每第n个包含div的行之后开始新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！