我在点击一个锚标签后尝试添加<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
答案 0 :(得分: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) + ']'));
}
答案 1 :(得分:1)
错误发生在对.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
的选择有点模糊。没有进一步的背景,很难想象它有什么目的。