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

您需要通过检查元素的数量来检查内部是否已经包裹它。您也可以使用 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");

Answer 2

您可以检查元素是否已经被包装并采取相应的行动：

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

wrap（）多次复制元素 - jQuery

2 个答案: