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个元素。我想将结果拆分为2个部分。我迭代元素并追加元素的前半部分。但我无法将第二个元素附加到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 = [];
}

迭代省略了几个元素

1 个答案: