在布局中创建新行的功能无法正常工作

Question

运行 Joomla 的网站具有特定于不同产品类别的模板布局。在本例中，我们正在查看产品类别 A 的布局。此产品类别布局应该将产品组织在每行 3 个产品的网格中。

PHP/Jquery 代码获取该类别的产品，然后具有将产品分配给“子行”类的逻辑，直到其中有 3 个产品，然后它创建下一个子行并将其分配给该子行。我不是 PHP 开发人员，所以我想获得一些意见。

问题：

• 以前只有 6 个产品在此类别下展示，形成了完美的 3x2 网格。两个子行，每个子行三个产品。这很好。
• 添加了第 7 个产品，它创建了一个 3x3 网格，第 7 个产品是第三行第一个位置的唯一产品。这在视觉上显示正常，除了在 HTML 代码中它显示两个子行，第二个子行中有四个产品。它应该是三个子行，第三个子行中有一个产品。
• 添加了第 8 个产品，它创建了一个 3x4 网格，第 8 个产品是第四行第一个位置的唯一产品。在 HTML 代码中，它显示了三个子行，第二个子行有四个产品，第三个子行有一个产品。这是不好的。它应该已添加到第三行的第二个位置。

这是添加了第 8 个产品的 HTML：

下面是这个逻辑的 PHP/Jquery 代码。 有没有人发现任何明显的问题会导致这不遵循每行 3 个产品的模式？

callAPI("productlines/by/subcategory")
    .done(function(data) {
        var moulding = data['Product Category A']

        var maxPerRow = 3;
        var matMap = {};

        for (var i=0; i < moulding.length; i++) {
            if(i%2===0) {
                jQuery('<div/>')
                    .addClass('material-row-'+i)
            }

            var matgroup = jQuery('.material-rows');
            var subrow = matgroup.children(".subrow").last();
            if(subrow.length == 0) { subrow = jQuery("<div/>").addClass("subrow").attr("data-row",0).appendTo(matgroup); }

            if(!matMap[0]) matMap[0] = 0;
            if(++matMap[0] > maxPerRow){
                // console.log("subrow",subrow[0],"is full! making new row");
                subrow = jQuery("<div/>").addClass("subrow").appendTo(matgroup).attr("data-row",1+parseInt(subrow.attr("data-row")));
                matMap[0]=0;
            }

            popProducts(moulding[i],subrow[0])
        }

});

Answer 1

您的代码中的问题是，当您追加新行时，那里会有一个元素，因为追加元素的函数是在之后调用的，但是您在计数器 (matMap) 中设置了有 0 个元素，但它应该是1 (matMap[0] = 1;)

if(++matMap[0] > maxPerRow){
  // console.log("subrow",subrow[0],"is full! making new row");
  subrow = jQuery("<div/>").addClass("subrow").appendTo(matgroup).attr("data-row",1+parseInt(subrow.attr("data-row")));
  matMap[0]=1;
}

简单示例：

var moulding = [1, 2, 3, 4, 5, 6, 7, 8];

var maxPerRow = 3;
var matMap = {};

for (var i = 0; i < moulding.length; i++) {
  if (i % 2 === 0) {
    jQuery('<div/>')
      .addClass('material-row-' + i)
  }

  var matgroup = jQuery('.material-rows');
  var subrow = matgroup.children(".subrow").last();
  if (subrow.length == 0) {
    subrow = jQuery("<div/>").addClass("subrow").attr("data-row", 0).appendTo(matgroup);
  }

  if (!matMap[0]) matMap[0] = 0;
  if (++matMap[0] > maxPerRow) {
    // console.log("subrow",subrow[0],"is full! making new row");
    subrow = jQuery("<div/>").addClass("subrow").appendTo(matgroup).attr("data-row", 1 + parseInt(subrow.attr("data-row")));
    matMap[0] = 1;
  }

  jQuery("<div/>").append("Element: " + moulding[i]).addClass("moulding-col").appendTo(subrow[0]);
  // popProducts(moulding[i],subrow[0])
}

.subrow {
  display: flex;
}

.moulding-col {
  margin: 5px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="material-rows" />

与您的问题无关，但代码非常丑陋，您应该考虑改进它。我稍微改进了您的功能，以便您可以检查更好的做法（使用 let、const，不要在 DOM 中搜索您已经拥有的元素（例如table），使用更多描述性变量等...）。

const moulding = [1, 2, 3, 4, 5, 6, 7, 8];

const maxItemsPerRow = 3;
const table = $('.material-rows');

for (let i = 0; i < moulding.length; i++) {
  let row = table.children(".subrow").last();
  if (!(i % maxItemsPerRow)) {
    row = $("<div/>").addClass("subrow").attr("data-row", parseInt(i / maxItemsPerRow)).appendTo(table);
  }

  $("<div/>").append("Element: " + moulding[i]).addClass("moulding-col").appendTo(row);

}