javascript - 如何动态调整div的left属性

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=photo5的div，我想将id为photo6-photo10的div的左边各减少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 不是连续的.. 在此先感谢任何人帮助完成这项工作，甚至提出更好的想法。

编辑:

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

Answer 1

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

函数如下:

function deleteDiv(selector) {

  var mycrousel = $('.mycrousel');
  var div = $(selector);
  var divIndex = mycrousel.index(div);
  var otherElem;

  if (divIndex === 0) {
    otherElem = $(mycrousel.get(divIndex + 1));
  } else {
    otherElem = $(mycrousel.get(divIndex - 1));
  }

  // get left value between two member
  var leftElem = parseInt(div.css('left'));
  var leftOtherElem = parseInt(otherElem.css('left'));
  var leftPx = Math.abs(leftElem - leftOtherElem);

  // remove div
  div.remove();

  $('.mycrousel').each( function( index, element ) {
    if (index > divIndex - 1) {
     var $element = $(this);
     var left = parseInt($element.css('left'));
     // get new value of left or 0 if negative value
     var newLeft = Math.max(0, left - leftPx); 

     $element.animate({
         left: newLeft + "px"
     });
    } 
  });

 }

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