使用float更改div的定位顺序

Question

我有一堆div,区域ll向左浮动,所以他们坐在彼此旁边的行中填充页面.我想以编程方式更改它们的顺序并仍然使它们浮动.

我有一段我写的JS,它抓取每个盒子的偏移量,给它们一个固定的位置(使用偏移使它们保持原位),然后将它们设置为其他偏移量之一.我的问题是我现在需要将它们从绝对定位转换回浮动定位.这样做显然会将它们恢复到最初的状态.

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

Answer 1

您不希望自己设置索引 ; 你想在他们的容器中改变他们的顺序.

这很容易(使用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'>&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);
    }
  });

});