javascript - 关闭 Bootstrap 行并在每第 n 个包含 div 之后开始新行

Question

我有一个 Bootstrap 行，比方说，博客文章缩略图。

<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

我想关闭一行，插入 hr 标签并在每 4 个帖子缩略图后打开一个新的 Bootstrap 行。

<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 做到这一点？

Answer 1

可以做这样的事情:

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

DEMO