Question

我们的客户希望在广告商店中将带有一些广告的横幅或指向其他特殊页面的链接添加到其产品列表中。每行最多有4个项目（取决于分辨率）。标语可以是1到4种产品尺寸。因此，当它们的大小为2，并且在较低的分辨率下排在第3位时，会出现空白位置（因为行上还有其他2个项目，并且横幅广告应为2尺寸大，因此它不能适合同一行）。因此，我们必须将横幅与下一个元素切换以填补这一空白。

我们已经创建了该函数，该函数针对“片段”中的每个元素，每个元素都是带有product或banner的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（）函数进行一些操作，但是我不知道如何适应它。

Answer 1

您可以将当前div（需要移动的div）存储在变量中。

存储后，将其从DOM中删除，并将其附加到“目标” div之后。

一些简单的例子：

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

尝试使这种逻辑适合您的用例，我认为这会起作用。

与下一个div交换div

1 个答案: