Javascript 删除元素后，JQuery中的.each循环每三分之一跳一次索引。

我正在做的东西有一个4行的元素列表。删除元素时，我希望元素向上移动。现在，我正在通过在删除后每四个项分配一个类“last”，然后在行下面（在最后一个元素之后）插入一个间隔div来实现这一点

这是小提琴：

代码如下：

HTML:

JQuery：

//Remove artist
$(".remove-artist").click(function(event) {

      event.preventDefault();

      var id = $(this).find("i.fa-times").attr('id');

      var likeid = id.replace( /^\D+/g, '');

      $("#box-"+likeid).hide('slow', function() { 

          $("#box-"+likeid).remove(); 
          $('.spacer').remove();

          $('.boxBg').each(function() {
              $(this).removeClass('last');

              console.log($(this).index());
              console.log($(this).attr('id'));

              if (($(this).index() + 1) % 4 == 0){

                $(this).addClass('last');
                $('<div class="spacer"></div>').insertAfter($(this));
              }


          });

      });

});

//Show more artists
$('#show2').click(function(event){

    if($(this).hasClass('showing')) {
      $(this).removeClass('showing');
      $('.past').hide();
      $('.spacer').remove();
      $(this).find('span').html("View All");
    }
    else {
      $(this).addClass('showing');
      $('.past').show();

      $('<div class="spacer"></div>').insertAfter($('.last'));
      $(this).find('span').html("View Less");
    }
    event.preventDefault();
});

---

出于某种原因，它每三个元素跳过第一行之后的索引。这使得它显示的是3行而不是4行。你们中有人看到导致这种情况的问题吗？多谢各位

通过添加同级元素，您正在影响未来所有迭代的

$（this）.index（）

结果。幸运的是，您实际上不需要

$（this）.index（）

$（'.boxBg'）。每个（函数（i）{
$（this.removeClass（'last'）；
控制台日志（i）；
console.log（$（this.attr（'id'））；
如果（（i+1）%4==0）{
$（this.addClass（'last'）；
$（“”）.insertAfter（$（this））；
}
});

当然，可以使用隐式迭代和过滤将其简化为一行，前提是在此之前删除了间隔符，并且boxBg div是父div中唯一的元素

$(".boxBg").removeClass('last').filter(':nth-child(4n)').addClass('last').after('<div class="spacer"></div>');

$（.boxBg”）.removeClass（'last'）.filter（'：第n个子（4n'））.addClass（'last'）。在（''）之后；

这很有道理。您正在添加一个同级元素，它会影响所有未来迭代的索引。每次添加兄弟姐妹时，索引都会上升1，实际上跳过了一个。

//Remove artist
$(".remove-artist").click(function(event) {

      event.preventDefault();

      var id = $(this).find("i.fa-times").attr('id');

      var likeid = id.replace( /^\D+/g, '');

      $("#box-"+likeid).hide('slow', function() { 

          $("#box-"+likeid).remove(); 
          $('.spacer').remove();

          $('.boxBg').each(function() {
              $(this).removeClass('last');

              console.log($(this).index());
              console.log($(this).attr('id'));

              if (($(this).index() + 1) % 4 == 0){

                $(this).addClass('last');
                $('<div class="spacer"></div>').insertAfter($(this));
              }


          });

      });

});

//Show more artists
$('#show2').click(function(event){

    if($(this).hasClass('showing')) {
      $(this).removeClass('showing');
      $('.past').hide();
      $('.spacer').remove();
      $(this).find('span').html("View All");
    }
    else {
      $(this).addClass('showing');
      $('.past').show();

      $('<div class="spacer"></div>').insertAfter($('.last'));
      $(this).find('span').html("View Less");
    }
    event.preventDefault();
});

0
1
2
3
5
6
7
9
10
11
13
14
15
17
18

$('.boxBg').each(function(i) {
    $(this).removeClass('last');

    console.log(i);
    console.log($(this).attr('id'));

    if ((i + 1) % 4 == 0){
        $(this).addClass('last');
        $('<div class="spacer"></div>').insertAfter($(this));
    }
});

$(".boxBg").removeClass('last').filter(':nth-child(4n)').addClass('last').after('<div class="spacer"></div>');