将 div 与下一个 div 交换

Question

我们的客户想在他们的网上商店的产品列表中添加带有一些广告的横幅或指向其他特殊页面的链接。每行最多 4 个项目（取决于分辨率）。横幅可以有 1 到 4 个产品尺寸那么大。因此，当它们的大小为 2 并位于行的第 3 位时，在较低的分辨率下，会出现空白的地方（因为行中还有 2 个其他项目，而横幅应为 2 大小，所以它不能放在同一行）。所以我们必须用下一个元素切换这个横幅来填补这个空白。

我们创建了这个函数，它针对 "snippet" 中的每个元素，每个元素都是带有产品或横幅的 div + 如果 space 处为空，则还有其他计算结束与否。函数在交换某些项目时递归调用自身，因为可能需要交换更多项目（更大的横幅，更多的横幅）。

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的下一个元素交换，然后有return和递归调用。我用 insertBefore() 函数尝试了一些东西，但我不知道如何适应它。

Answer 1

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

存储后，将其从DOM中移除，并追加到"targeted"div之后。

一些简单的例子：

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

尝试在您的用例中采用此逻辑，我认为这会奏效。

将 div 与下一个 div 交换

Swap div with next div

html

jquery

swap