JQuery/Javascript:如何将一个东西放回页面加载上的位置

JQuery/Javascript: How to put a thing back where it was on pageload?

本文关键字：位置 加载 一个 Javascript JQuery      更新时间：2023-09-26

我的侧边栏中有一个块。当调整大小低于一定大小时，我将其放在我的主要内容中。当我将大小调整回原始大小时，我希望它回到原来的位置。问题是，此块位于不同页面侧边栏中的不同位置。它始终只有一个，因此它有一个 ID，但有时它是第一个侧边栏项目，有时它是第二个侧边栏项目。

当我再次调整页面大小时，如何将此内容放回开始的位置？

例如，当我的页面小于 640px 宽时，块 #foo 会使用 jQuery 移动到元素 #bar 下方。 

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

一切都很好。但是当我调整回大于 640px 宽的大小时，显然除了 #foo 之外，所有内容都会弹回原位。我可以在侧边栏中选择一个位置，然后始终将其放回原处，无论它来自侧边栏中的哪个位置，但这并不好玩。

我知道可以使用#baz :eq(n)之类的东西来查找#baz中的第 n 项......有没有像 $("#baz").getOrdinalPosition($(".parent-of-baz")); 这样的方法可以在我移动#baz之前找到在其父元素中的位置，以便我知道将其放回何处？

您可以使用包装器<div>并将其放回包装器中以恢复其先前的位置，但我不太热衷于在 DOM 中移动元素。这通常不是做事的正确方式。最好有两个块实例并使用 display:none/block .

您可以使用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，则将其插入顶部。

相关文章：