javascript - 移动项目在 DOM 中的位置

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 Metro 外观，水平和垂直一样多，所以想要用元素填充间隙，这些元素可能在 DOM 列表的下方

Answer 1

是的，这是可能的。您可以使用 insertAfter方法举例:

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

无需使用each方法。