jquery - 更改 div 的顺序以使用 float 定位

Question

我有很多 div，它们会向左浮动，因此它们彼此相邻，排成一行，填满一个页面。我想以编程方式更改它们的顺序，并且仍然让它们 float 。

我编写了一段 JS，它捕获每个框的偏移量，给它们一个固定位置(使用偏移量使它们保持在原位)，然后将它们动画到其他偏移量之一。我的问题是我现在需要将它们从绝对定位转换回 float 定位。这样做显然会让它们恢复到原来的样子。

我需要知道的是是否可以设置每个 div 的索引 - 因此我可以将偏移量与索引相关联并更新每个 div 偏移量和索引，以便当它们 float 时它们保持在原位。有没有办法使用 jQuery 设置 DOM 元素的索引？

Answer 1

您本身不想设置它们的索引；您想从字面上改变它们在容器中的顺序。

这很简单(使用 DOM 或 jQuery):如果您想将一个元素移动到其前一个同级元素的前面，请使用 insertBfore 上一个:

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

...或者在其下一个兄弟之后，使用 insertAfter 下一个:

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

大概您会在完成动画后执行此操作，将 div 恢复为 float 状态而不是绝对定位。

Live example | source

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'>&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);
    }
  });

});