的jQuery

Question

我已经搜索过，找不到我要找的东西，我想做的是：

<main class="content">
    Content
    <nav class="search">
    </nav>
</main>

并在某个媒体查询中将其更改为

<main class="content">
    Content
</main>
<nav class="search">
</nav>

这可能吗？谢谢你的帮助！

Answer 1

尝试insertAfter

＆＃13;

jQuery(function($) {
  $(".search").insertAfter(".content");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="content">
  Content
  <nav class="search">
  </nav>
</main>

＆＃13;

Answer 2

通常，我尝试很好地构建HTML，以便在CSS中处理与媒体查询相关的任何内容。我不确定你的HTML是什么样的，但最近我学会了window.matchMedia()方法，所以我认为你可以使用它。

的jQuery

if (window.matchMedia("(min-width: 400px)").matches) {
  $(".search").insertAfter(".content");
} else {
  $(".search").appendTo(".content");
}

Answer 3

您可以使用insertAfter删除元素并在特定元素后重新插入。

要从媒体查询处理此问题，您可以使用Modernizr's mq method。它比window.watchMedia（）具有更好的浏览器支持。它支持所有能够理解CSS中媒体查询的浏览器。

   if (Modernizr.mq('(max-width: 320px)')) {
       $(".search").insertAfter(".content");
   } else {
    //...
   }

如何使用JS或Jquery删除父html元素？

3 个答案:

的jQuery