Question

我一直在搜索几个小时，但无法弄清楚... 我有一个Bootstrap网格，需要在单击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>

现在，在大屏幕上，每行6列。如果单击第3个div，则需要在第6个之后插入新的div。如果单击第15个div，则应在第18个之后插入新的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>

Answer 2

尝试一下。

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

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

在引导网格的第n个子元素之后插入div

3 个答案: