将 div 与下一个 div 交换答案

【问题标题】：Swap div with next div将 div 与下一个 div 交换
【发布时间】：2019-07-09 12:26:46
【问题描述】：

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

我们创建了这个函数，它对“sn-p”中的每个元素进行遍历，每个元素都是带有产品或横幅的 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() 函数尝试了一些东西，但我不知道如何适应它。

【问题讨论】：

标签： jquery html swap

【解决方案1】：

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

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

一些简单的例子：

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

尝试在你的用例中适应这个逻辑，我认为这会奏效。

【讨论】：

是否可以从 (this) 获取下一项的实例？