Как вернуть insertAfter в jQuery?

Это мой код:

$(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, порядок деления хорошо изменяется по мере необходимости.

Но когда вы загружаете под 1024px и изменяете размер до 1024px, я бы хотел отменить заказ и вернуться к основному.

Любая помощь будет очень ценится!

2 ответа

Вы можете использовать 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();
}
if ($("#right1").length) { $("#right1").remove(); // go through all of them }

поместите это в свой текущий остальное. проверьте, существует ли этот элемент, если существует, удалите его, иначе ничего не делайте.

Другие вопросы по тегам