JQuery/Javascript：如何把它放回頁面加載的位置？

我在側邊欄中有一個塊。當調整到一定大小以下時，我將它放在我的主要內容中。當我重新調整到原始大小時，我希望它回到原來的位置。問題是，這個塊在不同頁面的邊欄中的不同位置。它總是隻有一個，所以它有一個ID，但有時它是第一個邊欄項目，有時是第二個。JQuery/Javascript：如何把它放回頁面加載的位置？

當我再次調整頁面大小時，我該如何將它放回原來的位置？

例如，當我的頁面寬度小於640px時，塊#foo會隨jQuery移動到元素#bar下面。

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

一切都很好。但是，當我重新調整到大於640像素寬的尺寸時，顯然，除了#foo之外，所有內容都會彈出。我可以在邊欄中挑選一個位置，並始終將其放回那裏，無論它來自邊欄中的哪個位置，但這並不好玩。

我知道這是可以使用的東西像#baz :eq(n)內#baz找到的第n項...有沒有像$("#baz").getOrdinalPosition($(".parent-of-baz"));的方法找到它的父元素中的#baz位置之前，我移動，所以我知道放在哪裏回來了？

來源

2013-09-27 beth

你的描述不是很清楚。它看起來像一些響應式設計問題，更好地解決在CSS中。 – Blaise

而不是移動元素，你可以克隆它，並隱藏原始？這將讓你取消隱藏它，並將它放在原始位置，而不管它在哪裏。 –

取消隱藏會容易得多。這可能是我會做的。謝謝！ – beth

您可以使用包裝<div>並將其放回到包裝中以重新獲得其以前的位置，但我並不太熱衷於移動DOM中的元素。這通常不是正確的做事方式。有兩個塊的實例可能會更好，並使用display:none/block切換它們。

來源

2013-09-27 22:13:20

對於像大圖像這樣的資源沉重的元素，這可能太麻煩了，但在我的情況下，它是一對文本按鈕，因此它可以工作。 – beth

您可以使用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，則將其插入頂部。

來源

2013-09-27 22:05:30

JQuery/Javascript：如何把它放回頁面加載的位置？

回答

相關問題