Question

我正在尝试遍历数组并克隆并将元素附加到数组中每个项目的div元素。一切都在工作，除非它有多个元素，我得到一些意想不到的结果。数组包含两个元素，我检查过每个循环只运行两次，但由于某种原因，我在结果中得到第三个元素。

我是否正确使用 clone（）和 appendTo（）？

每个循环：

let items = $(contentWrap).find(".lc-rating-modal-review-items-wrap");
$(items).empty();

$.each(data.items, function (index, review) {
    let item = GenerateReviewItem(review);
    $(item).appendTo(items);
});

GenerateReviewItem ：

function GenerateReviewItem(review) {
    let result = $(wrap).find(".lc-rating-review-item-template").clone();

    $(result).find(".lc-rating-review-item-template-date").html(review.dateFormated);
    $(result).find(".lc-rating-review-item-body-wrap").html(review.review);
    $(result).find(".lc-rating-review-item-template-stars-rating-label").html("(" + review.rating + ")");

    $(result).find(".lc-rating-review-item-template-star").each(function (index, star) {
        if (review.rating >= (index + 1)) {
            $(star).removeClass("fa-star-o").addClass("fa-star");
        }
    });              

    return result;
}

要克隆的HTML ：

<div style="display:none;">
    <div class="lc-rating-review-item-template">
        <div class="lc-rating-review-item-header-wrap">
            <div class="lc-rating-review-item-template-stars-wrap">
                <div>
                    <i class="fa fa-star-o lc-rating-review-item-template-star" aria-hidden="true"></i>
                </div>
                <div>
                    <i class="fa fa-star-o lc-rating-review-item-template-star" aria-hidden="true"></i>
                </div>
                <div>
                    <i class="fa fa-star-o lc-rating-review-item-template-star" aria-hidden="true"></i>
                </div>
                <div>
                    <i class="fa fa-star-o lc-rating-review-item-template-star" aria-hidden="true"></i>
                </div>
                <div>
                    <i class="fa fa-star-o lc-rating-review-item-template-star" aria-hidden="true"></i>
                </div>
                <div>
                    <span class="lc-rating-review-item-template-stars-rating-label"></span>
                </div>
            </div>
            <div style="text-align:right;">
                <span class="lc-rating-review-item-template-date"></span>
            </div>
        </div>
        <div class="lc-rating-review-item-body-wrap"></div>
    </div>
</div>

Answer 1

我建议将对模板节点的引用存储在循环之外，然后在循环内部进行克隆。

在循环外定义：

let template = $(wrap).find(".lc-rating-review-item-template")

然后改变这个：

let result = $(wrap).find(".lc-rating-review-item-template").clone();

对此：

let result = template.clone();

目前，当您的循环第二次执行时，$(wrap).find(".lc-rating-review-item-template")可能会找到两个而不是一个。

wrap似乎在GenerateReviewItem(review)函数的上下文中未定义{{1}}，除非它是全局的。

迭代包含两个元素的数组会产生三个对象

1 个答案: