jquery - 如何在 jQuery 中恢复 insertAfter？

Question

这是我的代码：

$(document).ready(function(){

function OrderDiv() {
    if ($(window).width() <= 1024) {
        $("#right1").insertAfter("#left1");
        $("#right2").insertAfter("#left2");
        $("#right3").insertAfter("#left3");
        $("#right4").insertAfter("#left4");
    } else {
        // I DON'T KNOW WHAT TO WRITE HERE ^^
    }
  }
  // check when page load
  OrderDiv();  // NEW

  $(window).resize(function(){
    OrderDiv(); // check to destroy or build when we resize browser
  });

});

当您加载大于 1024px 的屏幕尺寸时，没问题，您将屏幕大小调整为 1024px 以下，div 的顺序根据我的需要进行了很好的修改。

但是当你在 1024px 下加载并调整到 1024px 时，我想取消订单并返回基本。

任何帮助将不胜感激！

Answer 1

您可以使用 CSS 来显示或隐藏您的元素并完全避免使用 JavaScript。将元素添加到您的 HTML 中，然后使用以下 CSS：

#right1, #right2, #right3, #right4{
    display: none;
}

@media screen and (min-width: 1024px){
    #right1, #right2, #right3, #right4{
        display: block;
    }
}

如果您确实必须每次都使用 jQuery 来删除和添加元素，那么您的 else 语句将只是：

} else {
    $('#right1, #right2, #right3, #right4').remove();
}

Answer 2

if ($("#right1").length) { $("#right1").remove(); // go through all of them }

把它放在你当前的 else stmt 中。检查该元素是否存在，如果存在则删除它，否则不做任何事情。