JQuery / Javascript：如何將事物放回頁面加載中的位置？

Question

我的側邊欄有一個障礙。 當調整大小到一定大小以下時，我將其放在主要內容中。 當我將尺寸調整回原始尺寸時，我希望它回到原來的位置。 問題是，此塊位於不同頁面的側欄中的不同位置。 它始終只是一個，因此具有ID，但有時它是第一個側邊欄項目，有時是第二個側邊欄項目。

當我再次調整頁面大小時，如何將其放回原處？

例如，當我的頁面寬度小於640px時，使用jQuery將塊#foo移到元素#bar下方。

        $("#bar").after($("#foo"));

一切都很好。 但是，當我將大小調整為大於#foo ，顯然所有東西都會彈出回去，除了#foo 。 我可以在側邊欄中選擇一個位置，並始終將其放回該位置，而不管它從側邊欄中來自何處，但這並不有趣。

我知道可以使用#baz :eq(n)類的東西來查找#baz的第n個項目...是否有像$("#baz").getOrdinalPosition($(".parent-of-baz")); 在移動它之前在其父元素中找到#baz的位置，所以我知道將其放回哪里？

Answer 1

您可以只使用包裝器<div>並將其放回包裝器中以重新獲得其以前的位置，但是我不太想在DOM中移動元素。 通常這不是正確的處理方式。 最好有兩個block實例，並用display:none/block切換它們。

Answer 2

您可以使用HTML5數據屬性來保存側邊欄塊的順序，然后知道將其放回何處：

<div id="foo_block" data-sidebar-pos="1">Content</div>
<div id="bar_block" data-sidebar-pos="2">More Content</div>
<div id="other_block" data-sidebar-pos="3">Other Content</div>

然后，如果bar_block在主要內容內移動，它將保留其位置數據。 放回去只是將其插入側邊欄的下一個最低位置的塊之后的問題，或者如果位置為1，則將其插入頂部。