Question

我的布局（简化）如下

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

我想找出最快的方法来清空所有具有class =＆＃34; row＆＃34;的div。在一定的间隔（比如从0到59）

到目前为止，我已经尝试了很多选择：

$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方法应用于集合中的所有元素。

我认为最快的解决方案是使用导航器querySelectorAll方法（当您使用标准CSS选择器时，jQuery使用此方法）。尝试构建一个像div.row:eq(1), div.row:eq(2), div.row:eq(3) ...这样的大型CSS选择器，并使用它来执行此操作：$(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();
}

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

4 个答案: