Question

您好我正在使用bootstrap 4网格，我试图在第4个元素之后使用jquery插入产品缩放（使用ajax进行retreiving），但取决于用户点击每组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

试试这个，使用带有CSS选择器的jQuery：nth-child在每第4个项目之后插入：

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

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

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

2 个答案: