javascript - wrap() 多次重复元素 - jQuery

Question

我有一个非常基本的功能，每当浏览器窗口变得大于 x 像素量时，我就可以将一个 div 标签包装在另一个 div 标签内。

但是，我有一个奇怪的错误，一旦页面大小调整多次就会发生。

首先，我将向您展示我当前正在使用的 jQuery 脚本，以便您可以更好地了解我正在使用的内容。

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

基本上，一旦窗口变得大于1919px ，它将强制导航栏包裹在新的 div 标签内。

问题是当页面大小调整多次时，<div id='center'>元素将被重复多次。

因此，dom 中的输出不是这样的:

<div id="center">
    <div class="navbar-inner">
        <!-- e.t.c... !-->
    </div>
</div>

它将是:

<div id="center">
    <div id="center">
        <div id="center">
            <div id="center">
                <!-- this will duplicate over and over until at some point, it displays the navbar-inner div !-->
                <div class="navbar-inner">
                    <!-- e.t.c... !-->
                </div>
            </div>
        </div>
    </div>
</div>

我搜索了几乎所有我能找到的线索、链接、答案，但我就是找不到可以解决我的问题的东西。

我对 JavaScript 还很陌生，因此感谢所有帮助。

干杯。

Answer 1

您需要通过检查元素的计数来检查内部 if 条件是否已包装。您也可以使用 unwrap() 使元素变形。

$(window).on("resize", function() {
  if (window.matchMedia("(min-width: 1920px)").matches) {
    if (!$('#center').length)
      $(".navbar-inner").wrap("<div id='center'></div>");
  } else {
    $("#center .navbar-inner").unwrap();
  }
}).trigger("resize");   

或使用 is() 检查父级是否为 #center 方法。

$(window).on("resize", function() {
  if (window.matchMedia("(min-width: 1920px)").matches) {
    if (!$(".navbar-inner").parent().is("#center"))
      $(".navbar-inner").wrap("<div id='center'></div>");
  } else {
    $("#center .navbar-inner").unwrap();
  }
}).trigger("resize");