Javascript 如果浏览器窗口宽度大于x，请将div括在新div中

我想在我的网站中实现一个相当简单的功能，一旦浏览器窗口宽度大于或等于x，它就会将

a封装在

b内部。（或任何其他HTML元素，即：

）

我对JavaScript和jQuery有相当基础的知识。但是，我仍然尝试创建脚本（好吧，是它的一部分）

这就是我到目前为止所做的：

var windowWidth = $(window).width();

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

我决定稍微更新一下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");

$（窗口）.on（“调整大小”，函数（）{
if（window.matchMedia（“（最小宽度：1920px）”）.matches）{
$（“.navbar”）.wrap（“”）；
}否则{
var content=$（“.center”）.contents（）；
$（“.center”）.replacetwith（内容）；
}
}).触发（“调整大小”）；

如何阻止它多次复制

div

元素

---

干杯。

如果您的代码工作正常，唯一的问题是没有自动调用，那么下面的代码应该可以解决这个问题。在这里，我将您的代码附加到一个窗口

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

$（窗口）.on（“调整大小”，函数（）{
var windowWidth=$（window.width（）；
如果（窗宽>1919）{
$（“.navbar”）.wrap（“”；//居中navbar
}
否则{
$（“.navbar”）。展开（“.center”）；
}
}).触发（“调整大小”）//调整窗口大小

如果您的代码工作正常，但唯一的问题是它没有被自动调用，那么下面的代码应该可以解决这个问题。在这里，我将您的代码附加到一个窗口

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

$（窗口）.on（“调整大小”，函数（）{
var windowWidth=$（window.width（）；
如果（窗宽>1919）{
$（“.navbar”）.wrap（“”；//居中navbar
}
否则{
$（“.navbar”）。展开（“.center”）；
}
}).触发（“调整大小”）//调整窗口大小

$（窗口）。调整大小（函数（）{
var windowWidth=$（window.width（）；
如果（窗宽>1919）{
$（“.navbar”）.wrap（“”；//居中navbar
}
});

你可以用这个

$（窗口）。调整大小（函数（）{
var windowWidth=$（window.width（）；
如果（窗宽>1919）{
$（“.navbar”）.wrap（“”；//居中navbar
}
});

你可以用这个

在这种情况下，

window.resize（）

效率低下。我建议您使用

窗口。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
    }
})

var media=window.matchMedia（“（最小宽度：1919px）”）；
media.addListener（函数（m）}{
如果（m.matches）{
$（“.navbar”）.wrap（“”）；
}否则{
//拆下包装
}
})

在这种情况下，

窗口.resize（）

效率低下。我建议您使用

窗口。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
    }
})

var media=window.matchMedia（“（最小宽度：1919px）”）；
media.addListener（函数（m）}{
如果（m.matches）{
$（“.navbar”）.wrap（“”）；
}否则{
//拆下包装
}
})

包装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");

var isWrapped=false；
$（窗口）.on（“调整大小”，函数（）{
var windowWidth=$（window.width（）；
如果（windowWidth>1919&&！已包装）{
$（“.navbar”）.wrap（“”；//居中navbar
isWrapped=true；
}
否则{
//拆下包装袋
isWrapped=false；
}
}).触发（“调整大小”）；

包装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");

var isWrapped=false；
$（窗口）.on（“调整大小”，函数（）{
var windowWidth=$（window.width（）；
如果（windowWidth>1919&&！已包装）{
$（“.navbar”）.wrap（“”；//居中navbar
isWrapped=true；
}
否则{
//拆下包装袋
isWrapped=false；
}
}).触发（“调整大小”）；

我将尝试此操作！谢谢：）是的。如果它不起作用，请告诉我，因为我只是简单地将您自己的代码包装在这个流中，而没有检查它是否起作用！谢谢：-）会在几分钟内选择正确的答案，让我知道为什么不简单地使用

窗口。matchMedia（）

，它比

窗口更有效。resize（）

@DimalChandrasiri你可能是对的，但由于我们大多数人都习惯于使用

resize

，我同意了。此外，这只是指出问题中的问题。我们可以使用

setTimeout

使

resize

（和“滚动”）处理程序更高效。谢谢你提供的信息：）。我会尝试的！谢谢：）是的。如果它不起作用，请告诉我，因为我只是将您自己的代码包装在这个流中，而没有检查它是否起作用