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 }

将此信息放入您当前的其他信息中。检查该元素是否存在，如果存在则删除它，否则不执行任何操作。

如何在jQuery中恢复insertAfter？

2 个答案: