在 Javascript 中循环数千个表单元素的最快方法

Question

我正在尝试遍历数千个 javascript 元素。特别是复选框和选择。复选框需要在选中/取消选中之间切换，并且选择需要根据是否选中主复选框来禁用/启用。

 <script>
 function processFormElem(min, max, isChecked) {
    for (var i=min; i < max; i++) {
        document.getElementById('chkbox_'+i).checked = isChecked;
        document.getElementById('select_'+i).disabled = !(isChecked);
    }
}
</script>

 Check this: <input onchange='processFormElem(0,10000,this.checked);' type='checkbox'  value = '0'><br/><br/>

 <?php
 for ($i=0; $i < 10000; $i++) {
     echo "Check: <input type='checkbox' id='chkbox_$i' value = '1'> ";
     echo "Select: <select disabled='disabled'  id='select_$i'><option selected>1<option>xyz</select><br/>";
 }
 ?>

这段代码完成了所需的工作，但处理表单元素的速度非常慢，我可以注意到滞后。有什么办法让它更快？

Answer 1

如果您的复选框和选择框都紧随其后，请尝试使用nextElementSibling。问题是 document.getElementById 必须搜索 DOM 树中的每个元素以找到具有匹配 ID 的元素（尽管底层实现可能使用哈希表或其他东西来提高 ID 查找性能）

无论哪种方式，使用 nextElementSibling 都可以让您像遍历树一样遍历元素，从而节省查找时间。

例如：

var cb = document.getElementById('chkbox_' + min),
    sb = document.getElementById('select_' + min);
while (cb !== null && sb !== null) {
    cb.checked = isChecked;
    sb.disabled = !isChecked;

    cb = cb.nextElementSibling;
    sb = sb.nextElementSibling;
}

---

编辑：

正如 David 在下面指出的，并非所有浏览器都支持 nextElementSibling。您可以使用 nextSibling 解决这个问题。

代替：

cb = cb.nextElementSibling;

做：

while(cb !== null && cb.nodeName != 'Element') { cb = cb.nextSibling; }

话虽如此，不支持 nextElementSibling 的浏览器每天都在变得越来越少，而 nextSibling 解决方案也有很多自己的开销。如果您想支持旧版浏览器，这取决于您（或可能是您的老板）。

Answer 2

我认为在这里使用 Jquery 会更好：

$(':checkbox').each(function () {  
    this.checked = isChecked; 
});
//isChecked-true/false

希望一切顺利。