javascript - 如何在不使用 jQuery 重新计算布局的情况下操作元素

Question

我有很多 div 元素需要重新计算它们的高度。这些 div 位于另一个 id="content"的 div 中。

我是这样使用 jQuery 的:

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

大约有 1000 个 div 是这样重新计算的。这样做需要一些时间，我知道这是因为布局为每个元素重新计算一次。这只需要几秒钟，但已经很多了。

我之前得到了有关使用常规 JavaScript 文档片段的提示。我希望能够使用 jQuery 来执行此操作。

有什么方法可以使用 jQuery 分离此 div 并在将它们写回之前在事件 DOM 之外对其进行操作，以便在我完成操作之前不会重新计算布局？

Answer 1

尝试使用 detach 如下所示:

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>

j查询

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

我在操作分离元素的高度时遇到了问题。我确实找到了一种方法来做到这一点，但如果你在样式属性中有高度，你可以从那里提取信息并操作它。

举个例子，希望对你有帮助。

http://jsfiddle.net/4Sb8T/