jQuery查找下一行的位置以添加快速视图

Question

我在网格视图中有一个'li‘产品的集合，带有一个动态变量，该变量设置每行产品的数量。我想要做的是找到行中最后一个项目的位置，并在其下面附加一个'Quick‘div，然后按下它下面的行。

因此，如果每行项设置为4，并且要单击第一行的项目1、2、3、4，则应该得到如下内容：

<li class="post-1"></li>
<li class="post-2"></li>
<li class="post-3"></li>
<li class="post-4"></li>

<div class="quick-view">I am placed here because either item 1,2,3 or 4 were clicked</div>

<li class="post-5"></li>
<li class="post-6"></li>

<div class="quick-view">I would be placed here if the items per row was set to 6 because either item 1,2,3,4,5,6 were clicked</div>

<li class="post-7"></li>
<li class="post-8"></li>
<li class="post-9"></li>
<li class="post-10"></li>
<li class="post-11"></li>
<li class="post-12"></li>

所以，我在这个问题的数学或逻辑上遇到了一些问题，您如何根据每个行变量的项来计算，行的末尾在哪里。

一些基本代码不确定是否有用

var post = $('.post-' + post_id);
var loc = post.index();
var items_per_row = product_quick_view_vars.items_per_row;

Answer 1

如果li项始终是多个items_per_row，则可以通过flooring或ceil简单地获取要添加的索引，或者使用items_per_row对除法进行ceil，然后再将其与items_per_row相乘以获得索引。

例如：var indextoadd = items_per_row * Math.ceil(++itemindex / items_per_row);

测试场景：小提琴测试代码：

var items = $('li');

$('li').click(function(e){
    var items_per_row = 4; // product_quick_view_vars.items_per_row;

    var item = $(e.target); //the li that was clicked
    var itemindex = items.index(item); //find the li index
    var indextoadd = items_per_row * Math.ceil(++itemindex / items_per_row) - 1; //determine the item after which to append (-1 to get the 0 based index)

    var div = $('<div class=newdiv>A new div</div>'); //create a new div (class is just as an example)

    $(items[indextoadd]).after(div);
});