從DOM中清空一系列元素的最快方法是什么

Question

我的布局（簡化）如下

<div class="row">
    <div class="row_section">
    <div class="row_section">
    ...
</div>
<div class="row">
    <div class="row_section">
    ...
</div>
...

我想弄清楚在一定的時間間隔內（例如從0到59）清空所有具有class =“row”的div的最快方法

到目前為止，我嘗試了很多選擇：

$j('div.row').slice(nr_i, nr_s).empty();

令人驚訝地需要更長時間

for(i = nr_i; i < nr_s; i++) {
    $j('div.row:eq('+i+')').empty();
}

並且在一個例子中，只有在選定的時間間隔內有.row_section div，

$j('div.row_section').remove();

是最快但但還不夠快。 清空60行的一部分比創建新的部分要多兩倍，幾乎是實際的3倍。

考慮創建行涉及更多的條款，而不僅僅是添加一些部分（這些部分中還有其他內容，每行有很多部分）我認為創建它們需要更長的時間。

執行原始任務的最快方法是什么，為什么要花費更多（使用最快的解決方案）而不是創建新任務？

我還想補充一點，行元素可以達到數千個，但是永遠不會超過60-80個非空行，而row_sections會達到每行數百個。 是的，我知道在網絡應用程序中執行此操作是不切實際的，但是，這是必須要做的。

Answer 1

var elements = document.getElementsByClassName("row");
for(i=0; i<elements.length; i++)
{
    elements[i].innerHTML = '';
}

Answer 2

根據jQuery代碼， slice方法執行本機slice然后調用jQuery.merge方法。 merge方法對當前jQuery集合中的每個元素進行循環。

所以在你的第二個例子中，你只做了一個循環。 在第一個示例中，您創建一個切片，然后是合並循環，然后是第二個循環，將empty方法應用於集合中的所有元素。

我認為最快的解決方案是使用navigator querySelectorAll方法（當您使用標准CSS選擇器時，jQuery使用此方法）。 嘗試構建一個像div.row:eq(1), div.row:eq(2), div.row:eq(3) ...這樣的大CSS選擇器div.row:eq(1), div.row:eq(2), div.row:eq(3) ...並使用它來執行此操作： $(selector).empty() ;

Answer 3

你為什么不試試呢：

function removeRow(fromV, toV){
  $('div.row').each(function(i){
    if(i >= fromV && <= toV){ 
      $(this).remove();
    }
  });
}

另一個嘗試：

function removeRow(fromV, toV){
      var i = fromV;
      while(i <= toV){
          $('div.row').eq(i).remove();
          i++;
      }
    }

Answer 4

另一個選項，它不會導致額外的查詢選擇器解析：

var divs = $j('div.row');
for(var i = nr_i; i < nr_s; i++) {
    divs.eq(i).empty();
}