避免双重循环来插入节点并激活它们？
避免双重循环来插入节点并激活它们？
提问于 2014-03-27 01:37:42
我遇到的一个常见问题是，需要在循环中创建多个DOM节点，然后以某种方式激活这些节点，无论是通过应用插件、事件处理程序还是类似的方式。激活步骤要求元素首先实际存在。
所以你最终会做一些类似这样的事情：
// Loop 1: Create the nodes
var HTML = '<tr id="UID">';
for(var k in Fields){ // Fields is an object!
HTML += '<td>';
HTML += '<input class="ActivateMe"/>';
HTML += '</td>';
}
var HTML += '</tr>';
$TableBody.children('tr').first().before(HTML);
// Loop 2: Activate the new nodes
$('#'+UID).children('td').children('.ActivateMe').each(function(index){
$(this).InitSomePlugin();
});上面的代码针对这个问题进行了简化，但假设给定单元格中的每个元素都可以是不同的(可能是输入，可能是div)，也可能需要不同的插件(可能是颜色选择器，也可能是组合框)。
是否有可能避免在数据集上循环两次，并一次性执行插入和激活？我认为可以通过在第一个循环中添加节点来实现，这也允许在第一个循环中激活。但是它通常被认为是不好的做法，使用append在一个循环中，而不是存储您的所有HTML它在一个变量中，并附加所有的HTML一次。同时，对同一组数据循环两次似乎也很低效。在对性能影响最小的情况下处理此场景的最佳方法是什么？
Stack Overflow用户
发布于 2014-03-27 02:09:35
$tableBody = $('table');
// Prepare an DOM object but don't append it to DOM yet.
$tr = $('<tr></tr>',{
id: "UID"
});
// Loop over any condition you would see fit.
for(var i = 0; i < 2; ++i) {
$td = $('<td></td>',{
// Prepare your input element with your event bound to it
"html": $('<input/>', {"class": "ActivateMe"}).InitSomePlugin();
});
// append your td element
$tr.append($td);
}
// Add your tr element to the beginning of your table with prepand method.
$tableBody.prepend($tr);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22668900
复制相关文章
相似问题
腾讯云开发者
