jQuery.remove()快疯了

Question

我创建了一个简单的滑块，使用的是jQuery，而不是其他插件。

动画可以工作，但是当删除第一张幻灯片(在末尾移动它)时，.remove()意外地删除了所有幻灯片的。

这是代码(代码片段显示了确切的问题)：

​

$(document).ready(function()
{
    var AnimateGallery = function(item)
    {
        $(item).animate({left: "-=1"}, 20, 'linear', function()
        {
            // I tried to debug, testing if $(item) caught all the slides,
            // but it doesn't.
            $(item).attr("data-off", $(item).offset().left + $(item).width());
            $(item).attr("data-out", Boolean($(item).offset().left + $(item).width() < 100).toString());

            if(parseFloat($(item).attr("data-off")) < 0)
            {
                $(item).remove();
                // ^^^^ This one unexpectedly removes all the slides when the first one meets condition
            }
            else
                AnimateGallery($(item));
        });
    };

    $(".mp-gallery")
        .find(".mp-gallery-item")
        .each(function()
    {
        var $el = $(this);

        AnimateGallery($el);
    });
});

div.mp-gallery
{
    position: relative;
    top: 10%;
    left: 0;

    border: 1px solid black;

    background-color: #333;

    height: 40%;
    width: 100%;

    font-size: 0;

    box-shadow: 0 0 20px black;

    white-space: nowrap;
}

div.mp-gallery-item
{
    display: inline-block;

    width: calc(100% / 3);

    margin: 0;
    padding: 0;

    vertical-align: middle;

    font-size: 12pt;

    position: relative;
}
div.mp-gallery-item
{
    height: 100px;
}
div.mp-gallery-item-image
{
    cursor: pointer;

    height: 100%;
}
div.mp-gallery-item-text
{
    padding: 2%;

    vertical-align: middle;
    text-align: center;

    position: relative;
    top: -50%;

    background-color: rgba(0, 0, 0, 0.2);

    opacity: 1;

    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mp-gallery">
            <div class="mp-gallery-item" id="slide-1">
                <div class="mp-gallery-item-image" style="background-color: burlywood;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-2">
                <div class="mp-gallery-item-image" style="background-color: darkgreen;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-3">
                <div class="mp-gallery-item-image" style="background-color: darkseagreen;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-4">
                <div class="mp-gallery-item-image" style="background-color: cadetblue;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-5">
                <div class="mp-gallery-item-image" style="background-color: coral;">

                </div>
                <div class="mp-gallery-item-text">
                   Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-6">
                <div class="mp-gallery-item-image" style="background-color: gainsboro;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
        </div>

​

我不知道为什么会发生这种情况，我只想删除第一个幻灯片，将一个克隆的幻灯片追加到末尾，然后在满足条件(左边距)触发器时循环。

我使用的是jQuery 2.1.4

Answer 1

所有项目似乎在同一时间被移除的原因是，当它们的左侧兄弟姐妹被移除时，这些项会移动到左边。这会将每个项依次移动到0，触发remove方法。

一种解决方案是绝对定位项目。

​

$(document).ready(function() {
  var AnimateGallery = function(item) {
    $(item).animate({
      left: "-=1"
    }, 20, 'linear', function() {
      $(item).attr("data-off", $(item).offset().left + $(item).width());
      $(item).attr("data-out", Boolean($(item).offset().left + $(item).width() < 100).toString());
      if (parseFloat($(item).attr("data-off")) < 0) {
        $(item).remove();
      } else
        AnimateGallery($(item));
    });
  };

  $(".mp-gallery")
    .find(".mp-gallery-item")
    .each(function(index) {
      var $el = $(this);
      $el.css("left", $el.width() * index); /* Added this */
      AnimateGallery($el);
    });
});

div.mp-gallery {
  position: relative;
  top: 10%;
  left: 0;
  border: 1px solid black;
  background-color: #333;
  height: 40%;
  width: 100%;
  font-size: 0;
  box-shadow: 0 0 20px black;
  white-space: nowrap;
}

div.mp-gallery-item {
  display: inline-block;
  width: calc(100% / 3);
  margin: 0;
  padding: 0;
  vertical-align: middle;
  font-size: 12pt;
  position: absolute; /* Changed this */
}

div.mp-gallery-item {
  height: 100px;
}

div.mp-gallery-item-image {
  cursor: pointer;
  height: 100%;
}

div.mp-gallery-item-text {
  padding: 2%;
  vertical-align: middle;
  text-align: center;
  position: relative;
  top: -50%;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 1;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mp-gallery">
            <div class="mp-gallery-item" id="slide-1">
                <div class="mp-gallery-item-image" style="background-color: burlywood;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-2">
                <div class="mp-gallery-item-image" style="background-color: darkgreen;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-3">
                <div class="mp-gallery-item-image" style="background-color: darkseagreen;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-4">
                <div class="mp-gallery-item-image" style="background-color: cadetblue;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-5">
                <div class="mp-gallery-item-image" style="background-color: coral;">

                </div>
                <div class="mp-gallery-item-text">
                   Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-6">
                <div class="mp-gallery-item-image" style="background-color: gainsboro;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
        </div>

​