更有效的方法来更新javascript中的多个元素？

Question

我有6周的div ID" #first,#second...... #sixth.

如果我想在每个div上执行函数,我会设置一个包含每个div名称的数组.如果我想应用一个函数,我设置一个for循环,迭代遍历数组中的每个元素,并(例如)将背景颜色更改为红色:

function updateAllDivsInTheList() {
  for(var i = 0; i < array.size; i++)
    $("#"+array[i]).changeCssFunction();
  }
}

每当我创建一个新div时,我都会将它添加到数组中.

问题是,如果我有大量需要更新的div(比如1200个div中的1000个),那么必须按顺序遍历数组中的每个元素才能成为一个痛苦/表现.是否有更新多个div的替代,更有效的方式或数据结构？可能除了数组之外还有其他更高效的数据结构？或者我正在以最有效的方式做什么？

Answer 1

您应该缓存jQuery对象,以便您的名称列表成为jQuery对象的列表.迭代1000个项目的数组很快.每次构建1000个新的jQuery对象都很慢.

var names = [ "one", "two", ..., "six" ];

// Turn the array of strings into an array of their corresponding jQuery ele
var $divs = $.map(names, function (v) { return $("#" + v); });

您还可以将多个ID链接到一个选择器中,避免(外部)循环; jQuery(可能)仍然在内部实现这个循环.

$('#one, #two, #three').changeCssFunction();

请注意,更新DOM一千次会变慢,在某些浏览器中比在其他浏览器中更多.您可以考虑重新考虑代码,以便从某个父对象添加或删除类,从而允许一些新的CSS选择器将所有子元素与单个DOM更新匹配.