Question

我的标题可能没有明确解释我想要实现的内容，我有一些动态创建的div，现在我有一个ajax请求删除用户希望删除的任何div，我想如果ajax返回成功我会删除div，我使用.remove（）方法删除div现在我的问题是在图像被删除后，它包含的空间是空的所以我需要调整所有直接兄弟的左边填补空空间。

  <div class="carousel-inner">
      <div class="mycrousel" id="photo1" style="left:10"></div>
      <div class="mycrousel" id="photo2" style="left:120"></div>
      <div class="mycrousel" id="photo3" style="left:230"></div>
      <div class="mycrousel" id="photo4" style="left:340"></div>
      <div class="mycrousel" id="photo5" style="left:450"></div>
      <div class="mycrousel" id="photo6" style="left:560"></div>
      <div class="mycrousel" id="photo7" style="left:670"></div>
      <div class="mycrousel" id="photo8" style="left:780"></div>
      <div class="mycrousel" id="photo9" style="left:890"></div>
      <div class="mycrousel" id="photo10" style="left:1000"></div>
  </div>

所有这些都是从左到右的同一行，现在假设用户删除id为id = photo5的div，我想减少div的左边，id为photo6-photo10，每个为110，占用了剩下的空间删除div

function scrollThumb() {
            var $scrollWidth = 110;
            var $photoId = 'photo5' //id of the photo that was deleted
            var $totalPhoto = $('.carousel-inner > div').length;//get the total number of div left;


            $('#photo6').animate({
                    left: "-=" + $scrollWidth + "px"
                }
             $('#photo7').animate({
                    left: "-=" + $scrollWidth + "px"
                }
              $('#photo8').animate({
                    left: "-=" + $scrollWidth + "px"
                }
              $('#photo9').animate({
                    left: "-=" + $scrollWidth + "px"
                }
                $('#photo10').animate({
                    left: "-=" + $scrollWidth + "px"
                },

           }

我知道上面的代码是错误的，但它只是我想要实现的概述，我不想要，也不能硬编码我想要它动态，我也想到在函数中使用计数器但它不会工作因为id不是串行的.. 提前感谢，任何一个人的帮助，使这项工作或更好的主意。

修改

我更新了我的问题添加了im img，在img下面我们可以看到我有4个图像现在我删除了一个并且它占用的空间是空的，我需要动态更改右边其他2个图像左边的属性删除图像的一侧并减少110px左边这将使它们填满被删除图像留下的空间，如果我使用float：left而不是绝对位置，CSS将为我做这个，但我需要使用绝对定位来实现我的目标，任何帮助谢谢

Answer 1

为什么你需要知道删除了哪个图像？毕竟你想要的是一个整齐排列的图像列表。我认为这就足够了：

＆＃13;

function scrollThumb() {
  var $scrollWidth = 110;
  var $startingPosition = 10;
  var index = 0;
  
  $('.carousel-inner > div').children().each(function(){
    $(this).animate({
      left: ($startingPosition + $scrollWidth*index)+"px"
    }, 300);

    index++;
  });                                       
}

＆＃13;

Answer 2

你是以非常低效的方式做到这一点，在移动设备上打开这个代码会让它变得迟滞和凹陷。

简单地将所有图片放在父元素中，然后滚动该元素。这样就可以避免所有图像上的所有选择器和多个动画。

如果你删除了一个图像，css属性就足以填补被删除图像的空白，+你可以添加很酷的动画和css进行过渡！

Answer 3

我做了一个小jsfiddle，希望这是你想要的： https://jsfiddle.net/j45x4qjx/

这是功能：

.all()

您只需要传递要删除的div的选择器，然后计算此div与较近的div之间的像素数，并将该数字移除到所有其他div。

如何动态调整Div的左侧属性

3 个答案: