Question

当我的屏幕尺寸低于880px时，我想在我的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

Answer 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();

});

Answer 2

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

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

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一台未知的打印机采用了类型的厨房，并将其拼凑成一本类型的样本。它不仅存在了五个世纪，而且还延续了电子排版，基本保持不变。它在20世纪60年代推出了包含Lorem Ipsum段落的Letraset表格，最近还发布了包括Lorem Ipsum版本在内的桌面出版软件Aldus PageMaker。

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

然后在CSS中显示“MobileHide”类：内联或阻止880px以上，并在下方显示：none。并且“MobileOnly”类显示：none高于880px，并在其下方显示：block或inline。

希望有所帮助！

使用Jquery交换html元素？

2 个答案: