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

我已经找了好几个小时了，但就是找不到这个。。。 我有一个引导网格，需要在单击的div所在的行之后插入一个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>

contents\u 1
目录2
目录3
目录4
.
.
.
目录50

现在，在大屏幕上，每行6列。如果我点击第三个div，我需要在第六个div之后注入一个新的div。如果我点击第15个div，那么在第18个div之后应该注入一个新的div。 我尝试过使用

div:nth child（6n）

，但它只对第一行有效，对其他行无效

谁能给我指一下正确的方向吗？谢谢大家!

试试这个

$('.col-xs-6.col-sm-6.col-md-3.col-lg-2').on('click', function() {
  $('<div />').insertBefore($(this).next().next().next().next());
});

$（'.col-xs-6.col-sm-6.col-md-3.col-lg-2'）。在（'click'，function（）{
$（''）.insertBefore（$（this.next（）.next（）.next（）.next（））；
});

尝试如图所示的逻辑

  $('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>');
  });

$（'div.col-xs-6'）。在（'click'，function（）上{
var divNo=$（'div.col-xs-6'）。索引（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（'Test'）；
其他的
$（'div.col-xs-6'）.last（）.after（'Test'）；
});

$（文档）.ready（函数（）{
$（'div.col-xs-6'）。在（'click'，function（）上{
var divNo=$（'div.col-xs-6'）。索引（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（'Test'）；
其他的
$（'div.col-xs-6'）.last（）.after（'Test'）；
});
});

目录1
目录2
目录3
目录4
目录5
目录6
目录7
目录8
目录9
目录10
目录11
目录12
目录13
目录14
目录15
目录16
目录17
目录18
目录19
内容\u 20
HTML标记：

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

contents\u 1
目录2
目录3
.
.
.
目录50

试试这个jQuery脚本

$(document).ready(function(e) {
    $(document).on('click','.col_div',function(e) {
        var div_num = ($( this ).prevAll().length) + 1; // get clicked div's number
        var count = 6 - (div_num % 6);

        var last_div_num_in_row = div_num + count; // get the number of the last div in the row

        var new_div = '<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2 col_div">new div</div>';

        $(".col_div:nth-child("+last_div_num_in_row+")").after(new_div);
    });
});

$（文档）.ready（函数（e）{
$（文档）.on（'click'，'col_div'，函数（e）{
var div_num=（$（this）.prevAll（）.length）+1；//单击div的编号
var计数=6-（div_num%6）；
var last\u div\u num\u in\u row=div\u num+count；//获取行中最后一个div的编号
var new_div=‘new div’；
$（“.col\u div:n子项（“+last\u div\u num\u in\u row+”））。在（new\u div）之后；
});
});
谢谢，这几乎完美无瑕。我做了一些更改，因为insertAfterindex行不正确-尝试单击#6，您将看到它在12后插入，在18后插入#12等等。但是，它确实指导了我正确的方法并解决了我的问题，所以谢谢！