Question

我正在处理具有4行的元素列表的东西。当删除元素时，我希望元素向上移动。现在，我通过分配一个班级＆＃34;最后一个＆＃34;删除后的每四个项目，然后在行下面插入一个spacer div（在最后一个元素之后）。

以下是代码：

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())将打印出以下内容：

出于某种原因，它在每第三个元素的第一行之后跳过索引。这样做是为了显示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>');

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

1 个答案: