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

您好，我使用的是Bootstrap4Grid，我正在尝试使用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
产品5
产品6
产品7
产品8
产品9
产品10
产品11
产品12

例如：

如果用户单击产品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>

产品1
产品2
产品3
产品4
产品缩放
产品5
产品6
产品7
产品8
产品9
产品10
产品11
产品12

如果用户单击产品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>

产品1
产品2
产品3
产品4
产品5
产品6
产品7
产品8
产品缩放
产品9
产品10
产品11
产品12

如果用户单击产品9、10、11或12，我希望在产品12之后插入缩放div，依此类推

有什么办法可以做到这一点吗

我不需要ajax的帮助，这没问题。

---

提前感谢大家为您提供的任何帮助

试试这个，使用jQuery和CSS选择器：在每4个项目后面插入第n个子项：

$（'.col-4:n子项（4n）'）。在（'product zoom'）之后

参考
尝试使用jQuery和CSS选择器：第n个子项在每第4项后插入：

$（'.col-4:n子项（4n）'）。在（'product zoom'）之后

应该这样做的参考：

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

var cols=$（'#products.col-4'）；
cols.click（函数（）{
var el=$（本）；
//获取单击的元素索引
var index=el.index（）；
//检查它所属的“组”
var组=数学ceil（指数/4）；
//在该组的最后一项之后插入所需内容
$（cols.get（（group*4）-1））.after（'product zoom'）；
});
应该这样做：

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

var cols=$（'#products.col-4'）；
cols.click（函数（）{
var el=$（本）；
//获取单击的元素索引
var index=el.index（）；
//检查它所属的“组”
var组=数学ceil（指数/4）；
//在该组的最后一项之后插入所需内容
$（cols.get（（group*4）-1））.after（'product zoom'）；
});
发布您尝试过的内容，或许我们可以提供帮助？发布您尝试过的内容，或许我们可以提供帮助？这很有效。请注意，这将在每次单击时继续插入产品缩放，因此如果单击1然后单击2，则在第4个元素之后将有两个缩放。您还可以在
之后使用
移动元素。因此，如果一次只显示一个，您可以使用
after
移动缩放，方法是将一个引用传递给
zoom
元素。插入缩放后，此操作会中断，因为后面元素的索引将被偏移，并且不再匹配其产品编号。这是有效的。请注意，这将在每次单击时继续插入产品缩放，因此如果单击1然后单击2，则在第4个元素之后将有两个缩放。您还可以在
之后使用
移动元素。因此，如果一次只显示一个，您可以使用
after
移动缩放，方法是将一个引用传递给
zoom
元素。插入缩放后，此操作将中断，因为后面元素的索引将被偏移，不再匹配其产品编号。