Поменяйте местами div со следующим div - PullRequest
Новая
       14

Поменяйте местами div со следующим div

0 голосов
/ 09 июля 2019

наш клиент хочет добавить баннер с некоторыми рекламными объявлениями или ссылками на другие специальные страницы в список своих товаров в своем интернет-магазине.В строке может быть не более 4 элементов (зависит от разрешения).Баннеры могут быть от 1 до 4 размеров продукта.Таким образом, когда они имеют размер 2 и занимают 3-е место в ряду, при более низких разрешениях появляется пустое место (поскольку в строке есть еще 2 элемента, а баннер должен быть размером 2, поэтому он не помещается натот же ряд).Таким образом, мы должны поменять этот баннер на следующий элемент, чтобы заполнить этот пробел.

Мы создали эту функцию, которая передает каждый элемент в «фрагменте», каждый элемент div с продуктом или баннером + существуют другие вычисления, еслиесть пустое место в конце или нет.Функция вызывает себя рекурсивно, когда она меняет некоторые элементы, потому что может потребоваться обменять больше элементов (большие баннеры, больше баннеров). 

function orderBanners() {
    $rowSize = document.getElementById('snippet--filteredproducts').offsetWidth;
    $actualRowSize = 0;

    $("#snippet--filteredproducts > div").each(function(){
        $nextItem = $actualRowSize + this.offsetWidth;

        if($nextItem == $rowSize) {
            /* Jump to next row */
            $actualRowSize = 0;
        } else if($nextItem > $rowSize) {
            /* Swap with next item */
            /* TODO */
            orderBanners();
            return;
        } else {
            $actualRowSize += this.offsetWidth;
        }
    });
}

Я выбрал «this» и хочу поменять его наСледующий элемент из этого foreach, то есть возврат и рекурсивный вызов.Я пробовал некоторые вещи с помощью функции insertBefore (), но не знаю, как это сделать.

1 Ответ

0 голосов
/ 09 июля 2019

Вы можете сохранить текущий div (тот, который нужно переместить) в переменной.

После сохранения удалите его из DOM и добавьте после «целевого» раздела.

Небольшой пример: 

const myDiv = $("#myDiv"); //in your case, that I think that will be $(this)
$("#myDiv").remove();
$nextItem.append(myDiv);

Попробуйте использовать эту логику в вашем случае использования, и я думаю, что это сработает.

...