Javascript 在所需位置单击定位标记后添加列表元素

我试图在单击锚定标记后添加一个

（快速查看，当您将鼠标悬停在灰色框上时显示）。逻辑是，如果元素正在单击的位置是3的倍数，那么我在该位置之后添加

，效果很好。问题是当我有1和2的余数时。它正在将

移动到它旁边。如果描述不合理，请让我知道，我可以试着解释更多。这是算法

if r = 0 
    do (add an element at this + 1);
if r <= 1
    do (add an element at this +3);
if r = 2
    do (add an element at this + 2);

Where r is the remainder, r = p/3 ..p is the position of the element

如果r=0
do（在此+1处添加一个元素）；
如果r不是很清楚！但我认为你想要类似的东西：

    if(r == 0){
        $('<li class="product-drawer">'+Number(index + 1) +'</li>').insertAfter($(this).parent());
    }else if(r == 2){
        $('<li class="product-drawer">'+Number(index + 2) +'</li>').insertAfter($(this).parent().parent().find('li[data-loopcount=' + (index + 2) + ']'));
    }else if(r <= 1){
      $('<li class="product-drawer">'+Number(index + 3) +'</li>').insertAfter($(this).parent().parent().find('li[data-loopcount=' + (index + 3) + ']'));
    }

if（r==0）{
$（'
'+编号（索引+1）+'
）.insertAfter（$（this.parent（））；
}else如果（r==2）{
$（'
'+Number（index+2）+'
'）。insertAfter（$（this）.parent（）.parent（）.find（'li[data loopcount='+（index+2）+'））；
}else if（r调用
.eq（）
）时出错：只有将其应用于具有多个匹配项的jQuery对象时才有意义。但是
$（this）.parent（）
将只返回一个元素，因此将
eq（）
应用于该对象没有意义

相反，请使用
.next（）

下面是一个基于此的解决方案，它还可以将代码最小化以避免重复：

$('.quick-view').on('click', function(e) {
    e.preventDefault();
    $('.product-drawer').remove();
    var $curr = $(this).parent();
    var productIndex = $curr.attr('data-loopcount');
    var r = productIndex % 3;
    var index = $(this).parent().index() + [1, 3, 2][r];
    var $li = $('<li class="product-drawer">' + index +'</li>');
    var $target = [$curr, $curr.next().next(), $curr.next()][r];
    $li.insertAfter($target);
})

$（'.quick view'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（'.product drawer'）.remove（）；
var$curr=$（this.parent（）；
var productIndex=$curr.attr（'data-loopcount'）；
var r=productIndex%3；
var index=$（this.parent（）.index（）+[1,3,2][r]；
var$li=$（'
'+index+'
）；
var$target=[$curr，$curr.next（）.next（），$curr.next（）][r]；
$li.insertAfter（$target）；
})

看

根据您的目标，可能需要进一步的工作。例如，新插入的
li
元素可能需要获得一些其他属性。此外，基于
data loopcount
的选择有点模糊。如果没有进一步的上下文，很难想象它有什么用途。
基于data loopcount的选择是正确的确实很模糊。我可以根据零基索引构建逻辑。
$('.quick-view').on('click', function(e) {
    e.preventDefault();
    $('.product-drawer').remove();
    var $curr = $(this).parent();
    var productIndex = $curr.attr('data-loopcount');
    var r = productIndex % 3;
    var index = $(this).parent().index() + [1, 3, 2][r];
    var $li = $('<li class="product-drawer">' + index +'</li>');
    var $target = [$curr, $curr.next().next(), $curr.next()][r];
    $li.insertAfter($target);
})