将在DOM项目的位置

可以说我有一个容器，6个项目：将在DOM项目的位置

<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" 
}

不知道这是可能的。

的基本问题是，我建立一个砖石布局，但更像是一个窗口地铁看，水平不亚于垂直，所以想用空白填充元素这可能进一步回落的DOM

来源

2015-02-11 Darren Sweeney

* ...用砖石布局不同... *不同在什么意义？为什么不使用砌体插件？此外，何时应该发生变化？以及在什么情况下？ – 2015-02-11 11:01:41

不同之处在于其水平，因此从左到右 - 例如350px高，4个元素 - 其中两个350h，在他们之间和他们之间1个元素，每个高度175 - 我想最后175h去第一个175h元素 – 2015-02-11 11:14:16

之后和第一个175h应该说 – 2015-02-11 11:24:08

您可以使用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>

来源

2015-02-11 10:58:11

谢谢！当我通过容器循环时，我不能使用$（this）.insertAfter（.className'）;如果我在督察看它没有移动 – 2015-02-11 11:11:33

你可以解释'循环通过容器'是什么意思吗？ – 2015-02-11 11:12:06

正如问题所在：$（“。container> .item”）。each（function（）{ – 2015-02-11 11:14:41

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

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

无需使用each方法。

来源

2015-02-11 10:58:08 antyrat

将在DOM项目的位置

回答

相关问题