1

我有一个我写的简单模块。目的是在页面上使用某个类名下的任何 url 创建链接

下面是完成所有脏活的主要功能

generateLinks: function(){
    $('.link-gen').each(function(index, item){
        var replace = $(item).html().replace(_regEx, _linkMarkUp);
        $(item).html(replace);
    });
}

我的理解是我应该尝试一次应用所有 dom 更改，这样我就不需要不断访问 dom。如果我可能要修改页面上的许多不同链接，我将如何做呢？

4

1 回答 1

1

我会尽量回答你的问题的细节。

如果您需要修改页面中的 N 个单独元素，您的选择是：

  1. 获取包含所有 N 个单独元素的 HTML 的公共父级的 HTML，并在 RAW HTML 上使用某种搜索和替换来查找每个目标元素中要更改的部分。然后将更改后的 HTML 设置回公共父级。

  2. 对整个 HTML 正文执行与上述步骤相同的操作。

  3. 在 DOM 中找到您需要修改的每个对象并直接更改其 HTML（就像您当前的代码一样）。

虽然选项 1 和 2 较少 DOM 操作，但它们通常是一种不好的处理方式，因为您要求浏览器做大量繁重的工作，丢弃大量现有的 DOM 对象，再次从头解析原始 HTML，然后创建大量新的 DOM 对象。这还具有清除该 HTML 中所有现有事件处理程序的副作用（因为它们都是新的 DOM 对象）。所以在大多数情况下不推荐使用 1 和 2。

这给您留下了选项 3，这就是您已经在做的事情。要修改 N 个单独的对象，请使用 N 个 DOM 操作 - 每个对象一个。

我怀疑您阅读的评论是为了解决这样的问题（很多 DOM 操作，但都在一个对象上）：

var item = $("#foo");
for (var i = 0; i < collection.length; i++) {
    item.html(item.html() + "<br"> + collection[i]);
}

当这样的事情会好很多时（一个 DOM 操作）：

var item = $("#foo");
var newText = "";
for (var i = 0; i < collection.length; i++) {
    newText += "<br"> + collection[i];
}
item.html(item.html() + newText);
于 2012-10-11T04:33:38.287 回答