jQuery:为每组4个元素在第4个元素之后添加元素

Question

嗨，我使用的是引导4网格，我试图用jquery在第4个元素之后插入一个产品缩放(使用ajax)，但这取决于用户单击的每组4个元素的位置。

<div class="row" id="products">
 <div class="col-4">product 1</div>
 <div class="col-4">product 2</div>
 <div class="col-4">product 3</div>
 <div class="col-4">product 4</div>
 <div class="col-4">product 5</div>
 <div class="col-4">product 6</div>
 <div class="col-4">product 7</div>
 <div class="col-4">product 8</div>
 <div class="col-4">product 9</div>
 <div class="col-4">product 10</div>
 <div class="col-4">product 11</div>
 <div class="col-4">product 12</div>
</div>

例如：

如果用户单击产品1、2、3或4，我希望在产品4之后插入缩放div 。

<div class="row" id="products">
 <div class="col-4">product 1</div>
 <div class="col-4">product 2</div>
 <div class="col-4">product 3</div>
 <div class="col-4">product 4</div>
 <div class="col-12">product zoom</div>
 <div class="col-4">product 5</div>
 <div class="col-4">product 6</div>
 <div class="col-4">product 7</div>
 <div class="col-4">product 8</div>
 <div class="col-4">product 9</div>
 <div class="col-4">product 10</div>
 <div class="col-4">product 11</div>
 <div class="col-4">product 12</div>
</div>

如果用户单击产品5、6、7或8，我希望在产品8之后插入缩放div 。

<div class="row" id="products">
 <div class="col-4">product 1</div>
 <div class="col-4">product 2</div>
 <div class="col-4">product 3</div>
 <div class="col-4">product 4</div>
 <div class="col-4">product 5</div>
 <div class="col-4">product 6</div>
 <div class="col-4">product 7</div>
 <div class="col-4">product 8</div>
 <div class="col-12">product zoom</div>
 <div class="col-4">product 9</div>
 <div class="col-4">product 10</div>
 <div class="col-4">product 11</div>
 <div class="col-4">product 12</div>
</div>

如果用户单击产品9、10、11或12，我想在产品12之后插入缩放div 等等。

我怎么能做到这一点呢？

我不需要ajax的帮助，没有问题。谢谢大家的任何帮助，您可以提供！

Answer 1

这应该可以做到：

var cols = $('#products .col-4');
cols.click(function(){
    var el = $(this);
    // Get clicked element index
    var index = el.index();
    // Check in which "group" it belongs
    var group = Math.ceil(index / 4);
    // Insert what you want after the last item of that group
    $(cols.get((group * 4) - 1)).after('<div class="col-12">product zoom</div>');
});

Answer 2

尝试使用jQuery和CSS选择器:nth-child在每4项之后插入：

$('.col-4:nth-child(4n)').after('<div class="col-12">product zoom</div>');

参考https://api.jquery.com/nth-child-selector/