jQuery附加了几个类似的项目

Question

我有一个项目网格（每行中有几行产品卡的固定最大数量），我想根据屏幕分辨率重新排列（1张xs，2张sm，3张lg +）。 我有这段代码：

var recommendedProductCards = $('#upsell .product-col');

function renderRecommendedProductsCarousel(recommendedProductCardsPerRow) {
    if (recommendedProductCards.length) {

        var currentProductRowsNumber = $('#products-grid .row').length;

        recommendedProductCards.each(function (index, productCard) {

            if (index % recommendedProductCardsPerRow == 0) {
                $('#products-grid').append('<div class="item row products-row"></div>');
            }

            $('#products-grid .item').last().append(productCard);
        });

        for (var i = 0; i < currentProductRowsNumber; i++) {
            $('#products-grid .item').first().remove();
        }
    }
}

但是，例如，当将项目从每行3个移动到每行2个时，每个第2个附加项目都不会显示，并且不会出现在与第一个项目位于同一级别的$('#products-grid .item').last()行内的DOM中。

产品卡的CSS路径为#upsell #products-grid .item .product-col。