Question

我有这个HTML结构：

    <p id="lorem">
      <span class="part" id="n01">L</span><span class="part" id="n02">o</span><span class="part" id="n03">r</span><span class="part" id="n04">e</span><span class="part" id="n05">m</span> <span class="part" id="n06">i</span><span class="part" id="n07">p</span><span class="part" id="n08">s</span><span class="part" id="n09">u</span><span class="part" id="n10">m</span>
    </p>

<h1>Click Me</h1>

和这个JavaScript代码：

arrRed = ["#n01", "#n04", "#n05", "#n09"];
arrBlue = ["#n02", "#n07", "#n08"];

$("h1").click(function(){

    $.each(arrRed, function( i, v ){
        $(v).addClass("red");
    });

    $.each(arrBlue, function( i, v ){
        $(v).addClass("blue");
    });
})

http://jsfiddle.net/FF2Dr/

点击h1时，某些字母会获得某种颜色。问题在于性能，我引发了太多的回流/重绘。在另一个问题中有人告诉我使用parent.cloneNode(true)和parent.parentNode.replaceChild(clone, parent)。所以我克隆元素，改变它们，但它们又回到位，只触发一次回流。

所以我克隆了父元素：

var doc = document;
var lorem = doc.getElementById("lorem");
var clone = lorem.cloneNode(true)

但我现在该怎么办呢？我不得不修改clone中的元素然后替换它们，但再次使用$.each来编辑它们似乎不是一个好主意。

http://jsfiddle.net/FF2Dr/1/

Answer 1

试试这个：

$("h1").click(function(){
    var lorem = $("#lorem"),
        clone = lorem.clone(true);
    clone.children().filter(function() {
        return $.inArray('#' + this.id, arrRed) != -1;
    }).addClass("red").end().filter(function() {
        return $.inArray('#' + this.id, arrBlue) != -1;
    }).addClass("blue");
    lorem.replaceWith(clone);
});

Fiddle

创建一个clone，过滤这个新克隆元素的子元素两次以应用这些类，最后将旧元素完全替换为新元素。

或者，如果您愿意，在迭代数组时使用find代替filter：

$("h1").click(function(){
    var lorem = $("#lorem"),
        clone = lorem.clone(true);
    $.each(arrRed, function(i, v) {
        clone.find(v).addClass("red");
    });
    $.each(arrBlue, function(i, v) {
        clone.find(v).addClass("blue");
    });
    lorem.replaceWith(clone);
});

Fiddle

在JavaScript中触发较少的回流 - 如何编辑克隆元素中的元素？

1 个答案: