javascript - 迭代省略了一些元素

Question

您好，我使用以下代码来迭代来自服务器的响应并将其附加到 DOM。

var faqList = [];
if (resText.status == 'SUCCESS') {
    var faqChangeOffset = Math.ceil(resText.faqFeedList.length / 2);
    resText.faqFeedList.forEach(function (el, i) {
        var element = $('<div>').addClass('faq-question-wrapper').attr({
            'knowledgeArticleId': el.knowledgeArticleId,
                'type': el.type
        }).append(
        $('<h3>').html(el.title)).append(
        $('<div>').addClass('faq-answer').append(
        $('<p>').html(el.description)));

        faqList.push(element);

        if (faqList.length == faqChangeOffset) {
            $('.faq-container').append(
            $('<div>').addClass('col-xs-12 col-sm-6 col-md-6 col-lg-6').append(element));
            faqList = [];
        }
    });
}

问题是，例如 resText.faqFeedList 获取 7 个元素。我想将结果分成两部分。我迭代元素并附加元素的前半部分。!但我无法将第二个元素附加到 DOM 中。我在这里做错了什么!

Answer 1

当faqList.length == faqChangeOffset第一次时，您将单个元素添加到DOM并清空faqList。但在接下来的迭代中，faqList 没有获得足够的元素，因此它的长度不再等于 faqChangeOffset，因此最后一个代码块永远不会再次执行。

在forEach之后，其余元素存储在faqList中，因此您可以迭代它并在forEach之后立即执行相同的代码块 结束。

类似这样的事情:

if (resText.status == 'SUCCESS') {
    var faqChangeOffset = Math.ceil(resText.faqFeedList.length / 2);
    resText.faqFeedList.forEach(function (el, i) {
        ...
    });

    // append the rest
    faqList.forEach(function (el, i) {
        $('.faq-container').append($('<div>').addClass('col-xs-12 col-sm-6 col-md-6 col-lg-6').append(el));
    });
    faqList = [];
}