用最少数量的孩子填充容器答案

【问题标题】：Fill container with minimum number of children用最少数量的孩子填充容器
【发布时间】：2018-07-21 18:34:35
【问题描述】：

想要用最少数量的孩子填充容器，我想知道最好的方法是什么。现在我得到了以下内容，但它非常臃肿......这个想法是有一个动态填充的容器。我希望容器始终填充至少 4 个子元素。

for(var k=0; k<parent.length; k++) {
    var section = parent[k],
        article = parent[k].querySelectorAll('.child');

    console.log(article);

    if(article.length === 1) {
        $('.parent').append('<li class="empty-child"></li><li class="empty-child"></li><li class="empty-child"></li>');
    } else if(article.length === 2) {
        $('.parent').append('<li class="empty-child"></li><li class="empty-child"></li>');
    } else if(article.length < 4) {
        $('.parent').append('<li class="empty-child"></li>');
    }
}

我只是觉得不对劲。我知道我可以使用 .append(new Array...，也许这就是要走的路？

任何提示将不胜感激。

【问题讨论】：

标签： jquery magento append

【解决方案1】：

可以使用从文章长度开始的for 循环。如果长度已经是 4 或更多，它不会做任何事情

var $parent =  $('.parent')
for(var j = article.length; j< 4; j++){
    $parent.append('<li class="empty-child"></li>');
}

【讨论】：

嗯，我想我在这里缺少一些基本的东西。如果我按如下方式实现它，我会得到额外的不需要的 '.empty' div。 var $parent = $('.parent'); for(var l=0; l<$parent.length; l++) { var section = $parent[l]; article = $parent[l].querySelectorAll('.child'); for(var m=article.length; m<4; m++) { $parent.append('<div class="empty"></div>'); } } 这个结果是` .parent .child .child .child .empty .empty .empty .empty .empty .empty .empty .empty .empty `
为什么从零开始？这不是我提议的
糟糕，我是个罪魁祸首。我会按照你最初的建议实施它，然后会回复你。
Hmz，我已经为此做了一支笔来测试，但似乎仍然忽略了一些东西：| codepen.io/jeffklunder/pen/rrwxMp?editors=0010

【解决方案2】：

我按照您的意图测试了您的代码，我很高兴地说它就像一个魅力！对于那些正在寻找类似答案的人，这里是代码：

jQuery(document).ready(function($) {

$('.section').each(function() {
    var child = $(this).find('li');

    for(var i=child.length; i<4; i++) {
        $(this).append('<li>empty</li>');
    }
});

});

【讨论】：