Question

我在点击一个锚标签后尝试添加<li>（快速查看，显示您将鼠标悬停在灰色框上时）。逻辑是如果元素是点击位于3的倍数的位置然后我在那之后添加<li>，这很好。问题是当我有1和2的余数时。它正在向下移动<li>。如果说明没有意义，请告诉我，我可以尝试解释一下。这是算法

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

这是JS

$('.quick-view').on('click', function(e) {
    e.preventDefault();
  $('.product-drawer').remove();
  var productIndex = $(this).parent().attr('data-loopcount');
  var r = productIndex % 3;
  var index = $(this).parent().index(); 
    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()).eq(Number(index + 2));
    }else if(r <= 1){
      $('<li class="product-drawer">'+Number(index + 3) +'</li>').insertAfter($(this).parent()).eq(Number(index + 3));
    }
})

这里是jsfiddle

https://jsfiddle.net/sghoush1/fnuyq9tw/9/

Answer 1

真的不清楚！但我想你想要类似的东西：

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

JSFiddle

Answer 2

错误发生在对.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);
})

请参阅updated fiddle。

根据您的目标，可能需要进一步的工作。例如，新插入的li元素可能需要获取一些其他属性。此外，基于data-loopcount的选择有点模糊。没有进一步的背景，很难想象它有什么目的。

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

2 个答案: