2

私はこの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>

​&lt;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)別の質問で、誰かがandを使うように言いましたparent.parentNode.replaceChild(clone, parent)。そのため、要素を複製して変更し、元の場所に戻し、リフローを 1 回だけトリガーします。

だから私は親要素を複製しました：

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

しかし、今どのように進めなければならないのでしょうか? どういうわけか要素を変更してからclone置き換える必要がありますが、$.eachもう一度使用して編集するのは良い考えではないようです。

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

4

1 に答える 1

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);
});

フィドル

を作成しclone、この新しいクローン要素の子を 2 回フィルタリングしてクラスを適用し、最後に古い要素を新しい要素で完全に置き換えます。

または、必要に応じて、配列を反復処理する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);
});

フィドル

于 2012-07-17T08:05:58.640 に答える