javascript - jQuery append() 在 for 循环后用于多个元素而不展平为 HTML

Question

我有一个循环:

for (index = 0; index < total_groups; index += 1) {

    groups[index].list_item = $(list_item_snippet);

    // Closure to bind the index for event handling
    (function (new_index) {

        groups[index].list_item.find('.listing-group-title')
                               .html(groups[index].Group.Name)
                               .click(function(e){

            fns.manageActiveGroup(new_index, groups);
            return false;
        });

    })(index);

    // Append to DOM
    mkp.$group_listing.append(groups[index].list_item);
};

我不想在每次循环触发时调用 append()。

我知道我可以使用字符串并将标记与每个循环迭代连接起来，并将字符串 append 到 mkp.$group_listing 最后，但是这会使对象变平并且绑定(bind)丢失(我不依赖于 ID)。

有没有一种方法可以将我的对象添加到一个数组中，并一次性将它们全部 append 到底部，而无需展平为 HTML？

假设:

• $(list_item_snippet) 包含一些定义列表项的 HTML(并包含一个类为 .listing-group-title 的元素)。
• groups 是在我的脚本中定义“组”的 JSON block
• 闭包效果很好

编辑:

发现我可以使用如下语法追加多个元素:

mkp.$group_listing.append(groups[0].list_item, groups[1].list_item );

但我显然需要自动化它 - 它不是数组，它只是可选的 append 函数参数，所以我不确定如何执行此操作。

Answer 1

要将元素数组 append 到选择器，您可以使用:

$.fn.append.apply($sel, myArray);

在你的情况下，因为它实际上是你需要的每个数组元素的 .list_item 属性，你可以使用 $.map 首先提取它们:

$.fn.append.apply(mkp.$group_listing, $.map(groups, function(value) {
     return value.list_item;
}));