Question

假设我在容器中有6件物品：

<div class="container">
  <div class="one" style="left:100px">...</div>
  <div class="two" style="left:200px">...</div>
  <div class="three" style="left:300px">...</div>
</div>

是否可以将dom更改为：

<div class="container">
  <div class="one" style="left:100px">...</div>
  <div class="three" style="left:300px">...</div>
  <div class="two" style="left:200px">...</div>
</div>

我正在尝试与砌体布局不同的东西，需要根据大小移动东西，然后重新布局容器。我不能只改变内联样式来移动它们，因为这会产生间隙，然后重新布局时，砌体代码会看到DOM，然后将它们移回。

理想情况如下：

$(".container > .item").each(function(){
  // if this class="three" then move its
  // outerHTML and insert it after class="one"
}

不确定这是否可行。

基本问题是我正在构建一个砌体布局，但更像是一个windows地铁外观，水平和垂直一样，所以需要填充元素，这些元素可能在DOM的列表中更深层次

Answer 1

是的，这是可能的。您可以使用insertAfter方法，例如：

$( '.container > .three' ).insertAfter( '.container > .one' );

无需使用each方法。

Answer 2

您可以使用insertAfter()来实现此目的。此外，如果您专门定位.three，则循环是多余的。试试这个：

$(".container > .three").insertAfter('.one');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="one" style="left:100px">ONE</div>
  <div class="two" style="left:200px">TWO</div>
  <div class="three" style="left:300px">THREE</div>
</div>

移动DOM中项目的位置

2 个答案: