Jquery 更改div的顺序以使用float进行定位

我有一堆div，它们会在左边浮动，所以它们会排成一行，填满一页。我想以编程方式更改它们的顺序，并且仍然使它们浮动

我有一段我写的JS，它捕捉每个框的偏移量，给它们一个固定的位置（使用偏移量使它们保持在原位），然后将它们设置为其他偏移量之一的动画。我的问题是，我现在需要将它们从绝对定位转换回浮动定位。这样做显然会让他们回到原来的样子

---

我需要知道的是，是否可以设置每个div的索引，这样我就可以将一个偏移量与一个索引关联起来，并更新每个div的偏移量和索引，这样当它们浮动时，它们就可以保持不变。有没有办法使用jQuery设置DOM元素的索引？

您不想设置它们的索引本身；你想改变他们在容器中的顺序

这很容易（使用DOM或jQuery）：如果要将元素移动到其上一个同级元素之前，请使用

prev

：

var elm = $("selector_for_the_element");
elm.insertBefore(elm.prev());

…或在其下一个同级之后，使用

next

：

var elm = $("selector_for_the_element");
elm.insertAfter(elm.next());

假设您在完成动画制作后会执行此操作，将div恢复为浮动而不是绝对定位

|

HTML:

JavaScript:

jQuery(function($) {

  var container = $("#container");
  var index;

  for (index = 0; index < 10; ++index) {
    $("<div>d" + index +" <span class='left'>&lt;</span> <span class='right'>&gt;</span></div>")
      .appendTo(container)
      .attr("id", "d" + index);
  }

  container.delegate(".left", "click", function() {
    var div = $(this).closest("div"),
        prev = div.prev();
    if (prev[0]) {
      div.insertBefore(prev);
    }
  });
  container.delegate(".right", "click", function() {
    var div = $(this).closest("div"),
        next = div.next();
    if (next[0]) {
      div.insertAfter(next);
    }
  });

});

jQuery（函数（$）{
var container=$（“#container”）；
var指数；
对于（索引=0；索引<10；++索引）{
$（“d”+索引+”）
.appendTo（容器）
.attr（“id”，“d”+索引）；
}
container.delegate（“.left”，“click”，function（））{
var div=$（此），
prev=div.prev（）；
如果（上一个[0]）{
插入前分区（上）；
}
});
container.delegate（“.right”，“click”，function（））{
var div=$（此），
下一个=下一个分区（）；
如果（下一个[0]）{
第插入者（下一个）；
}
});
});

在开始重新排列div的动画之前，能否将其原始位置和ID存储在对象数组中？然后有一个函数，通过数组中的对象进行迭代，调用以其原始位置为坐标的动画

工作示例：

Html:

<div class="moving">Item 1</div>
<div class="moving">Item 2</div>
<div class="moving">Item 3</div>
<div id="move-back">Click to Move To Orignal Pos</div>

Javascript:

var originalPos =[];

//Store Original

    $(".moving").each(function(){
        originalPos.push({"left":$(this).position().left,"top":$(this).position().top});
    });

    //rearrange
    $(".moving").each(function(i,e){
        $(this).css("position", "absolute");
        $(this).css("left",100 * ((3-i)-1));                
    });


    //move back to original - if needed you could also set top
    $("#move-back").click(function(){
        $(".moving").each(function(i,e){
            var position = originalPos[i];
            $(this).css("left",originalPos[i].left);                
        });
    });

---

最后，我修改了这个问题的解决方案，以满足我的需要，效果非常好：

---

多亏了

@T.JCrowder的帮助，他不需要将他们的位置从绝对变回静态吗？@kmb385：当然，我认为这是事实。我已经说得很清楚了。看起来很完美；谢谢唯一的问题是我忘了提到的东西-div将被设置为随机（尽管是预设）位置，所以我不知道如何实现这一点，只有insertBefore和insertBeforeinsertAfter@ollie：您可以使用和

width

来确定它与哪个元素的同级元素重叠，这将告诉您移动它的位置。例如，如果动画元素的

left

为250，则查找具有

left 250

的兄弟。然后使用

insertBefore

将动画元素捕捉到该兄弟元素之前的位置。抱歉，我将此问题标记为未回答，因为此解决方案不适用于我，因为我有数千个元素，这会导致浏览器超时

<div class="moving">Item 1</div>
<div class="moving">Item 2</div>
<div class="moving">Item 3</div>
<div id="move-back">Click to Move To Orignal Pos</div>

.moving{
    width: 100px;
    float:left;
}


#move-back{
    position: absolute;
    top: 200px;
    border: 1px solid lightgray;
}

var originalPos =[];

//Store Original

    $(".moving").each(function(){
        originalPos.push({"left":$(this).position().left,"top":$(this).position().top});
    });

    //rearrange
    $(".moving").each(function(i,e){
        $(this).css("position", "absolute");
        $(this).css("left",100 * ((3-i)-1));                
    });


    //move back to original - if needed you could also set top
    $("#move-back").click(function(){
        $(".moving").each(function(i,e){
            var position = originalPos[i];
            $(this).css("left",originalPos[i].left);                
        });
    });