javascript - 在引导网格中的第 n 个子项之后插入 div

Question

我已经搜索了几个小时，但就是无法弄清楚......我有一个 Bootstrap 网格，需要在单击的 div 所在行之后注入(inject)一个 div。例如，我有 50 行，例如

<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_1</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_2</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_3</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_4</div>
.
.
.
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_50</div>

现在，在大屏幕上，每行 6 列。如果我点击第 3 个 div，我需要在第 6 个 div 之后注入(inject)一个新的 div。如果我单击第 15 个 div，则应在第 18 个 div 之后注入(inject)一个新的 div。我尝试过使用 div:nth-child(6n) 但它仅适用于第一行，不适用于其余行。

有人能给我指出正确的方向吗？谢谢!

Answer 1

尝试如图所示的逻辑。

  $('div.col-xs-6').on('click', function() {
    var divNo = $('div.col-xs-6').index(this) + 1;
    var insertAfterindex = parseInt((divNo / 6) + 1) * 6;
    if ($('div.col-xs-6').eq(insertAfterindex - 1).length > 0)
      $('div.col-xs-6').eq(insertAfterindex - 1).after('<div>Test</div>');
    else
      $('div.col-xs-6').last().after('<div>Test</div>');
  });

$(document).ready(function() {
  $('div.col-xs-6').on('click', function() {
    var divNo = $('div.col-xs-6').index(this) + 1;
    var insertAfterindex = parseInt((divNo / 6) + 1) * 6;
    if ($('div.col-xs-6').eq(insertAfterindex - 1).length > 0)
      $('div.col-xs-6').eq(insertAfterindex - 1).after('<div>Test</div>');
    else
      $('div.col-xs-6').last().after('<div>Test</div>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_1</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_2</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_3</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_4</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_5</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_6</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_7</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_8</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_9</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_10</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_11</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_12</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_13</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_14</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_15</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_16</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_17</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_18</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_19</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_20</div>