如果浏览器窗口宽度大于x，则将div封闭在新div中

Question

我有一个相当简单的功能，我想在我的站点中实现，一旦浏览器Windows宽度超过或等于 X> X ，它将包含<div> A <div> B 内部。（或任何其他HTML元素，即：<span>）。

我对JavaScript和jQuery有非常基本的知识。但是，我仍然试图创建脚本（井的一部分）。

这是我到目前为止所拥有的：

var windowWidth = $(window).width();
if(windowWidth > 1919){
    $(".navbar").wrap( "<div class='center'></div>" ); // center navbar
}

我遇到的脚本的问题之一是它不会自动检查窗口宽度。相反，只有在刷新页面后才检查它。

我将如何解决这个问题？

编辑：我已经更新了代码。除了一件很小的事情外，一切都很好。

当我在Chrome中打开DOM Explorer时，如果宽度大于1919px，则它将将div包含在多个其他divs。

中

沿此目的的东西：

<div class="center">
    <div class="center">
        <div class="center">
            <div class="center">
                <!-- this will continue for ages until finally displaying the actual navbar div !-->
                <div class="navbar">
                    <!-- e.t.c. !-->
                </div>
            </div>
        </div>
    </div>
</div>

我决定更新我的jQuery，现在看起来像这样：

$(window).on("resize", function(){
    if (window.matchMedia("(min-width: 1920px)").matches) {
        $(".navbar").wrap("<div class='center'></div>");
    } else {
        var content = $(".center").contents();
        $(".center").replaceWith(content);
    }
}).trigger("resize");

我将如何阻止它多次复制div元素？

欢呼。

Answer 1

在这种情况下，window.resize()效率低下。我建议您使用window.matchmedia()来做任何您应该做的事情。当浏览器调整大小时，我不会一直发射，仅在命中特定分辨率时执行。阅读以下文档，您会得到一个想法。

mdn;MatchMedia

样本事件处理程序如下。

var media = window.matchMedia("(min-width: 1919px)");
media.addListener(function(m)}{
    if(m.matches){
      $(".navbar").wrap( "<div class='center'></div>" );
    }else{
      //Remove the wrap
    }
})

Answer 2

如果您的代码正常工作，并且唯一的问题是它不会自动调用，那么下面的代码应解决此问题。在这里，我将您的代码连接到窗口resize事件，并触发一次，以便在页面加载上，该函数将自动执行一次。之后，只要调整窗口，它就会被调用。

我还添加了else子句，因为我想如果窗口宽度降低到所选限制以下，您将要解开.navbar。您可以根据需要使用此或省略。

$(window).on("resize", function(){
  var windowWidth = $(window).width();
  if(windowWidth > 1919){
    $(".navbar").wrap( "<div class='center'></div>" ); // center navbar
  }
  else{
    $(".navbar").unwrap('.center');
  }
}).trigger("resize");//window resize

Answer 3

$( window ).resize(function() {
  var windowWidth = $(window).width();
if(windowWidth > 1919){
    $(".navbar").wrap( "<div class='center'></div>" ); // center navbar
}
});

您可以使用此。

Answer 4

包装DIV元素的代码应执行一次。当页面宽度已经大于所需的值时，您就不需要包装任何内容。

var isWrapped = false;
$(window).on("resize", function(){
var windowWidth = $(window).width();
if(windowWidth > 1919 && !isWrapped){
$(".navbar").wrap( "<div class='center'></div>" ); // center navbar
isWrapped = true;
}
else{
//remove wrapping div
isWrapped = false;
}
}).trigger("resize");