Question

想要在一个容器中填充最少数量的子代，我想知道这样做的最佳方法是什么。现在，我得到了以下内容，但是它非常膨胀……这个想法是要有一个动态填充的容器。我希望容器始终填充至少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 ...，也许就是这样吗？

任何提示将不胜感激。

Answer 1

可以使用从文章长度开始的for循环。如果长度已经是4或更大，它将什么都不做

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

Answer 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>');
    }
});

}）;

用最少的孩子人数填充容器

2 个答案: