Wie kann ich Elemente manipulieren, ohne das Layout mit jQuery neu zu berechnen

Question

Ich habe viele div-Elemente, wo ich ihre Höhen neu berechnen muss. Die divs befinden sich in einem anderen div mit id = "content".

Ich bin mit jQuery wie folgt aus:

$("#content div").css("height", "*=" + Math.random()); 

Es gibt etwa 1000 divs, die so neu berechnet. Es dauert einige Zeit, dies zu tun, und ich verstehe, dass das Layout für jedes Element einmal neu berechnet wird. Es dauert nur ein paar Sekunden, aber es ist viel zu viel.

Ich habe früher Tipps zur Verwendung von Dokumentfragmenten, die regelmäßig JavaScript ist. Ich würde gerne jQuery dazu verwenden können.

Gibt es eine Möglichkeit, mit jQuery diese divs zu trennen und sie außerhalb des aktiven DOM zu manipulieren, bevor sie zurückgeschrieben werden, so dass das Layout nicht neu berechnet wird, bis ich mit der Manipulation fertig bin?

Answer 1

Versuchen detach So etwas wie die folgenden verwendet:

HTML

<div id="content" > 
    <div class="test" style="height:100px;"> 
</div> 
    <div class="test" style="height:100px;"> 
</div> 
    <div class="test" style="height:100px;"> 
</div> 
    <div class="test" style="height:100px;"> 
</div> 
    <div class="test" style="height:100px;"> 
</div> 

jQuery

var el = $('.test').detach(); 
el.each(function(index){ 
    var height = $(this).attr('style').substring($(this).attr('style').indexOf('height:')+7,$(this).attr('style').indexOf('px')); 
    $(this).attr('style','height:'+height*Math.random()+'px'); 
}); 
$('#content').append(el); 

Ich hatte Probleme Manipulation der Höhe auf freistehende Elemente .. ich gefunden haben Eine Möglichkeit, es zu tun, wenn Sie die Höhe im Stil att haben ribute können Sie die Informationen von dort abrufen und manipulieren.

Hier ist ein Beispiel, hoffentlich wird es für Sie hilfreich sein.

http://jsfiddle.net/4Sb8T/