在 bootstrap 网格中的第 n 个 child 之后插入 div

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，我需要在第6个之后注入一个新的div。如果我点击15号div，18号之后应该会注入一个新的div。我试过使用 div:nth-child(6n) 但它只适用于第一行，而不适用于其余行。

谁能给我指出正确的方向？谢谢！

Answer 1

试试这个。

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

Answer 2

尝试如图所示的逻辑。

  $('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 3

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

在 bootstrap 网格中的第 n 个 child 之后插入 div

insert div after nth child in bootstrap grid

javascript

jquery

html

bootstrap-4

bootstrap-grid