我有大量的 div 区域会向左浮动，因此它们彼此相邻地排成一行，填满一页。我想以编程方式更改它们的顺序并且仍然让它们浮动。
我写了一段 JS，它抓取每个框的偏移量，给它们一个固定的位置（使用偏移量使它们保持原位），然后将它们动画到其他偏移量之一。我的问题是我现在需要将它们从绝对定位转换回浮动定位。这样做显然会使它们恢复到原来的样子。
我需要知道的是是否可以设置每个 div 的索引 - 所以我可以将偏移量与索引相关联并更新每个 div 的偏移量和索引，以便它们在浮动时保持原位。有没有办法使用 jQuery 设置 DOM 元素的索引？
【问题讨论】：
你不想设置他们的索引，本身；您想从字面上更改他们在容器中的顺序。
这很简单（使用 DOM 或使用 jQuery）：如果您想将元素移到其前一个兄弟元素的前面，请使用 insertBfore prev：
var elm = $("selector_for_the_element");
elm.insertBefore(elm.prev());
...或在其下一个兄弟之后，使用insertAfter next:
var elm = $("selector_for_the_element");
elm.insertAfter(elm.next());
大概你会在完成动画时这样做，将 div 恢复为浮动而不是绝对定位。
HTML：
<div id="container"></div>
CSS：
#container div {
float: left;
width: 4em;
border: 1px solid black;
margin: 2px;
padding: 2px;
}
.left, .right {
cursor: pointer;
font-weight: bold;
font-size: 14pt;
background-color: #eee;
border: 1px solid #aaa;
}
JavaScript：
jQuery(function($) {
var container = $("#container");
var index;
for (index = 0; index < 10; ++index) {
$("<div>d" + index +" <span class='left'><</span> <span class='right'>></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);
}
});
});
【讨论】：
offset 和width 找出它重叠的元素的哪个兄弟元素，这会告诉您将其移动到哪里。例如，如果您的动画元素的 left 是 250，则找到具有 left <= 250 和 (left + width) > 250 的兄弟。然后使用insertBefore 将动画元素捕捉到该兄弟元素之前的位置。
在开始重新排列 div 的动画之前，您能否将它们的原始位置和 ID 存储在对象数组中？然后有一个函数遍历该数组中的对象，调用以它们的原始位置为坐标的动画？
工作示例： http://jsfiddle.net/JpVS4/3/
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>
CSS：
.moving{
width: 100px;
float:left;
}
#move-back{
position: absolute;
top: 200px;
border: 1px solid lightgray;
}
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);
});
});
【讨论】：
最后我修改了这个问题的解决方案以满足我的需求并且工作得非常好：
Randomize a sequence of div elements with jQuery
非常感谢T.J. Crowder的帮助
【讨论】：