[英]jQuery append() for multiple elements after for loop without flattening to HTML
I have a loop: 我有一个循环:
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);
};
I would rather not call append()
each time the loop fires. 每次循环触发时我宁愿不调用
append()
。
I know that I could use a String and concatenate the markup with each loop iteration and append the string to mkp.$group_listing
at the end, however this flattens the object and the bindings are lost (I am not relying on IDs). 我知道我可以使用String并将标记与每个循环迭代连接
mkp.$group_listing
并在最后将字符串附加到mkp.$group_listing
,但是这会使对象变平并且绑定会丢失(我不依赖于ID)。
Is there a way to perhaps add my objects to an array and append them all in one go at the bottom without flatening to HTML? 有没有办法可以将我的对象添加到数组中并将它们全部一次性地附加到底部而不会转换为HTML?
Assumptions: 假设:
$(list_item_snippet)
contains some HTML defining a list item (and includes an element with class .listing-group-title
). $(list_item_snippet)
包含一些定义列表项的HTML(并包含一个具有类.listing-group-title
的元素)。 groups
is a block of JSON defining a 'group' in my script groups
是我的脚本中定义“组”的JSON块 Edit: 编辑:
Found that I can use the following syntax to append multiple elements: 发现我可以使用以下语法追加多个元素:
mkp.$group_listing.append(groups[0].list_item, groups[1].list_item );
But i obviously need to automate it - it's not an array it's just optional additional function parameters so I'm not sure how to do this. 但我显然需要自动化它 - 它不是一个数组,它只是可选的附加功能参数,所以我不知道如何做到这一点。
To append an array of elements to a selector you can use this: 要将一个元素数组附加到选择器,您可以使用:
$.fn.append.apply($sel, myArray);
In your case, since it's actually the .list_item
property of each array element that you need you can use $.map
to extract those first: 在您的情况下,因为它实际上是您需要的每个数组元素的
.list_item
属性,您可以使用$.map
首先提取它们:
$.fn.append.apply(mkp.$group_listing, $.map(groups, function(value) {
return value.list_item;
}));
Instead of bind it the way you've done, if you bind it using on()
like below, 如果你使用
on()
绑定它,而不是像你所做的那样绑定它,
$(document).on('click', '.listing-group-title', function() {
// click handler code here
});
You can flatten the HTML and append it in one statement and it'll still work. 您可以展平HTML并将其附加到一个语句中,它仍然可以工作。
Note: For better efficiency, replace document
in the above statement to a selector matching the closest parent of .listing-group-title
注意:为了提高效率,请将上述语句中的
document
替换为与.listing-group-title
最近的父级匹配的选择器
Yes. 是。 Use the jQuery
add
method to add all your items to a jQuery object. 使用jQuery
add
方法将所有项添加到jQuery对象。 Then append that one object. 然后附加一个对象。
http://api.jquery.com/add/ http://api.jquery.com/add/
EDIT: Example: 编辑:示例:
var arr = $();
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) {
...
})(index);
// Add to jQuery object.
arr.add(groups[index].list_item));
};
mkp.$group_listing.append(arr);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.