使用 Jquery 交换 html 元素？答案

【问题标题】：Swap html elements using Jquery?使用 Jquery 交换 html 元素？
【发布时间】：2014-07-02 01:34:27
【问题描述】：

当我的屏幕尺寸低于 880 像素时，我想切换我的 html 中的 html 元素，但是它没有按我的预期工作......

在我的 html 中，我的 php 循环生成的帖子很少，每个帖子看起来像这样：

<div class="post">
  <h1>Lorem ipsum</h1>
  <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  </p>
</div>

我想要做的是当我的浏览器屏幕达到 880px 及以下时，h1 和 p 元素将使用 jquery insertBefore 相互交换。

下面是我的代码：

http://codepen.io/vincentccw/pen/GHnFD?editors=101

【问题讨论】：

标签： jquery html swap

【解决方案1】：

$(document).ready(function () {

    $(window).resize(divSwap);

    function divSwap() {
        if ($(document).width() <= 880) {
            $('.post').each(function () {
                $el = $(this);
                $el.find('p').insertBefore( $el.find('h1') );
            });
        }
    }

    divSwap();

});

【讨论】：

divSwap 函数被设置为窗口上的 resize 事件的事件处理程序。
是的，我注意到在我发表关于页面加载的评论后，我删除了评论。不过答案很好——肯定比我的更好。

【解决方案2】：

您可以在 p 标签下方添加另一个 h1 标签，并在移动设备上隐藏第一个标签，并在移动设备上显示第二个标签。我讨厌重复信息，但这是一个快速简单的解决方法：

<div class="post">
<h1 class="MobileHide">Lorem ipsum</h1>
<p>

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业的标准虚拟文本，当时一位不知名的印刷商采用了一种类型的厨房并将其加扰以制作类型样本书。它不仅经历了五个世纪，而且经历了电子排版的飞跃，基本保持不变。它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行起来，最近还随着 Aldus PageMaker 等桌面出版软件（包括 Lorem Ipsum 的版本）而普及。

</p>
<h1 class="MobileOnly">Lorem ipsum</h1>
</div>

然后在您的 CSS 中，“MobileHide”类是 display:inline 或 880 像素以上的块，以及 display:none 以下。并且“MobileOnly”类是 display:none 880px 以上，display:block 或者 inline 在它下面。

希望有帮助！

【讨论】：