在JavaScript中觸發較少的迴流 - 如何編輯克隆元素中的元素？

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