2

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

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

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

4

3 回答 3

5

你不想设置他们的index，本身；您想从字面上更改他们在容器中的顺序。

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

});
于 2012-07-04T09:29:04.677 回答
0

在开始重新排列 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);                
        });
    });
于 2012-07-04T09:29:35.967 回答
0

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

使用 jQuery 随机化 div 元素序列

非常感谢TJ Crowder的帮助

于 2012-07-10T11:07:26.810 回答