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

Question

当一个元素被删除时，我希望元素向上移动。现在，我正在为删除后的每四个项分配一个类" last“，然后在行下插入一个间隔div (在最后一个元素之后)。

这是小提琴：http://jsfiddle.net/yNA4J/1/

以下是代码：

HTML：

<section class="Con1Artists" id="show">
    <article class="topHeadingTitle">
      <article class="vieAllTitle"><a id="show2" href="#"><span>View All</span></a></article>
    </article>

    <article class="MusicianCol clearfix" id="hide">

      <article class="boxBg latest" id="box-1">
        <div class="image-height"><a href="#" class="remove-artist"><i id="all-1" class="remove fa fa-times fa-lg"></i></a><a href="/users" title="image"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" width="260" height="159" alt="" title=""></a></div>
          <article class="bottomTextMusic">
            <h2><a href="/users">This Guy</a></h2>
          </article>
      </article>

      <article class="boxBg latest" id="box-2">
        <div class="image-height"><a href="#" class="remove-artist"><i id="all-2" class="remove fa fa-times fa-lg"></i></a><a href="/users" title="image"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" width="260" height="159" alt="" title=""></a></div>
          <article class="bottomTextMusic">
            <h2><a href="/users">This Guy</a></h2>
          </article>
      </article>

      <article class="boxBg latest" id="box-3">
        <div class="image-height"><a href="#" class="remove-artist"><i id="all-3" class="remove fa fa-times fa-lg"></i></a><a href="/users" title="image"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" width="260" height="159" alt="" title=""></a></div>
          <article class="bottomTextMusic">
            <h2><a href="/users">This Guy</a></h2>
          </article>
      </article>

      <article class="boxBg latest last" id="box-4">
        <div class="image-height"><a href="#" class="remove-artist"><i id="all-4" class="remove fa fa-times fa-lg"></i></a><a href="/users" title="image"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" width="260" height="159" alt="" title=""></a></div>
          <article class="bottomTextMusic">
            <h2><a href="/users">This Guy</a></h2>
          </article>
      </article>

      <article class="boxBg past" id="box-5">
        <div class="image-height"><a href="#" class="remove-artist"><i id="all-5" class="remove fa fa-times fa-lg"></i></a><a href="/users" title="image"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" width="260" height="159" alt="" title=""></a></div>
          <article class="bottomTextMusic">
            <h2><a href="/users">That Guy</a></h2>
          </article>
      </article>

      <article class="boxBg past" id="box-6">
        <div class="image-height"><a href="#" class="remove-artist"><i id="all-6" class="remove fa fa-times fa-lg"></i></a><a href="/users" title="image"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" width="260" height="159" alt="" title=""></a></div>
          <article class="bottomTextMusic">
            <h2><a href="/users">That Guy</a></h2>
          </article>
      </article>

      <article class="boxBg past" id="box-7">
        <div class="image-height"><a href="#" class="remove-artist"><i id="all-7" class="remove fa fa-times fa-lg"></i></a><a href="/users" title="image"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" width="260" height="159" alt="" title=""></a></div>
          <article class="bottomTextMusic">
            <h2><a href="/users">That Guy</a></h2>
          </article>
      </article>

      <article class="boxBg past last" id="box-8">
        <div class="image-height"><a href="#" class="remove-artist"><i id="all-8" class="remove fa fa-times fa-lg"></i></a><a href="/users" title="image"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" width="260" height="159" alt="" title=""></a></div>
          <article class="bottomTextMusic">
            <h2><a href="/users">That Guy</a></h2>
          </article>
      </article>

      <article class="boxBg past" id="box-9">
        <div class="image-height"><a href="#" class="remove-artist"><i id="all-9" class="remove fa fa-times fa-lg"></i></a><a href="/users" title="image"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" width="260" height="159" alt="" title=""></a></div>
          <article class="bottomTextMusic">
            <h2><a href="/users">That Guy</a></h2>
          </article>
      </article>

      <article class="boxBg past" id="box-10">
        <div class="image-height"><a href="#" class="remove-artist"><i id="all-10" class="remove fa fa-times fa-lg"></i></a><a href="/users" title="image"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" width="260" height="159" alt="" title=""></a></div>
          <article class="bottomTextMusic">
            <h2><a href="/users">That Guy</a></h2>
          </article>
      </article>

      <article class="boxBg past" id="box-11">
        <div class="image-height"><a href="#" class="remove-artist"><i id="all-11" class="remove fa fa-times fa-lg"></i></a><a href="/users" title="image"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" width="260" height="159" alt="" title=""></a></div>
          <article class="bottomTextMusic">
            <h2><a href="/users">That Guy</a></h2>
          </article>
      </article>

      <article class="boxBg past last" id="box-12">
        <div class="image-height"><a href="#" class="remove-artist"><i id="all-12" class="remove fa fa-times fa-lg"></i></a><a href="/users" title="image"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" width="260" height="159" alt="" title=""></a></div>
          <article class="bottomTextMusic">
            <h2><a href="/users">That Guy</a></h2>
          </article>
      </article>


    </article>
  </section> 

CSS：

.MusicianCol {
display: block;
margin: 0 0 50px;
}

.boxBg {
background: #fff;
border-radius: 6px;
box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.1);
margin: 0 3% 0 0;
width: 22%;
float: left;
}

.image-height {
height: 159px;
overflow: hidden;
position: relative;
}

.remove-artist {
position: absolute;
right: 5px;
top: 5px;
}

.bottomTextMusic {
text-align: center;
padding: 5px 6px 5px;
border-bottom: 1px solid #e9e8e8;
}

.image-height i.remove {
  color:#3baa57 !important;
  display:none;
}

.image-height:hover i.remove {
  display:block;
}

i.remove a:hover {
  color:#3baa57;
}

.past{
    display:none;
}

.spacer {
  height:10px;
    width:100%;
    float:left;
}

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();
});

但是，如果我有16个元素，并且删除了第8项，console.log($(this).index())将打印出以下内容：

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

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

Answer 1

通过添加一个同级元素，对以后的所有迭代都会影响$(this).index()的结果。幸运的是，您实际上并不需要$(this).index()。

$('.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 div是父div中的唯一元素。

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