1

我有 6 个带有 ID 的 div " #first，#second...#sixth

如果我想在每个 div 上执行函数，我会设置一个包含每个 div 名称的数组。如果我想应用一个函数，我会设置一个循环遍历数组中的每个元素并（例如）将背景颜色更改为红色：

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

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

问题是，如果我有大量需要更新的 div（比如 1200 个 div 中的 1000 个），那么必须按顺序遍历数组中的每个元素可能是一个痛苦/性能坦克。是否有一些替代的、更有效的方式或数据结构来更新多个 div？也许除了数组之外还有其他更有效的数据结构？还是我正在做的最有效的方式？

4

4 回答 4

8

您应该缓存您的 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 更新来匹配所有子元素。

于 2012-06-27T21:10:41.397 回答
0

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

于 2012-06-27T21:13:43.080 回答
0 
var divs$ = [];
$('div.someClass').each(function(i,e) {
  divs$.push($(e));
});

function updateAllDivsInTheList() {
  for(var i = 0; i < array.size; i++)
    divs$[i].changeCssFunction(); 
  }
}
于 2012-06-27T21:16:11.043 回答
0

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

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

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

如果您想要真正的性能提升，请不要使用 jQuery。您可以使用本机 DOM 方法直接应用样式更改（这当然取决于它们的复杂性和跨浏览器安全性），或者您可以尝试操作样式表而不是单个元素上的样式属性。

于 2012-06-27T21:20:54.793 回答