вставить div после n-го ребенка в сетку начальной загрузки

Question

Я искал часы, но просто не могу понять это ... У меня есть сетка Bootstrap, и мне нужно вставить 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>

Теперь на большом экране это 6 столбцов в строке. Если я нажимаю на 3-й div, мне нужно добавить новый div после 6-го. Если я нажму на 15-й div, новый div должен быть введен после 18-го. Я пытался использовать 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>

Answer 2

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>

Попробуйте этот скрипт 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);
    });
});

Answer 3

Попробуйте это.

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