Question

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

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

我需要知道的是，是否可以设置每个div的索引 - 所以我可以将偏移量与索引相关联，并更新每个divs offset和index，这样当它们浮动时它们就会保持原位。有没有办法使用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恢复为浮动而不是绝对定位。

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

});

Answer 2

在开始重新排列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);                
        });
    });

Answer 3

最后，我修改了这个问题的解决方案，以满足我的需求并且工作得很好：

Randomize a sequence of div elements with jQuery

非常感谢T.J. Crowder

提供的帮助

使用float更改div的定位顺序

3 个答案: