Question

我有6个ID为“#first，#second ... #sixth的div。

如果我想在每个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更新匹配。

Answer 2

更有效的方法可能是在客户端不这样做。在Internet Explorer中，与dom的每次交互（检查css类，更改css，检查属性）都可能导致dom刷新，从而导致页面“冻结”。如果您仍然打算这样做，您应该为每个div提供一个公共类名，并使用jquery来选择该类名。然后，您可以遍历返回的jquery对象列表。

Answer 3

var divs$ = [];
$('div.someClass').each(function(i,e) {
  divs$.push($(e));
});

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

Answer 4

当调用jQuery方法时，它将在内部循环遍历集合中的所有匹配元素。因此，仅构建一个包含所有元素的jQuery对象会更有效：

$(array.map(function(id){return "#"+id;}).join(", ")).changeCssFunction();

使用更简单的选择器会更容易，例如通过使用一个类。如果您想多次使用该方法，请务必缓存jQuery对象。

如果您希望获得真正的性能提升，请不要使用jQuery。您可以使用本机DOM方法直接应用样式更改（当然这取决于它们的复杂性和跨浏览器安全性），或者您可以尝试在单个元素上尝试manipulate style sheets而不是样式属性。< / p>

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

4 个答案: