Javascript JQuery'；它的附属物非常慢！

我有一个html表格，我根据每个表格行的自定义属性值的CSV列表重新排序。我正在使用以下函数执行此操作：

for (var i = 0; i < arrCSV.length; i++)
{
  $('#' + tableId)
      .find('[fname = ' + arrCSV[i] + ']')
      .eq(0)
      .parents('tr')
      .eq(0)
      .appendTo('#' + tableId);
}

for（变量i=0；i

表格结构为：

<table>
<tr>
 <td fname='f1'>something here</td>
</tr>
<tr>
 <td fname='f2'>something here</td>
</tr>
</table>

这里有东西
这里有东西

CSV可以是这样的“f2，f1”

我发现这是一个执行速度非常慢的函数。非常感谢您在优化过程中提供的任何帮助

编辑：

---

根据上一篇文章，只需使用html连接字符串调用一次append，就可以最大限度地提高性能。有人能帮我解决这个问题吗？我不知道如何将s HTML放入for循环并附加一次。

您可能需要重新考虑算法

在不改变算法的情况下，略微优化如下：

var $table = $("#" + tableId);

for (var i = 0; i < arrCSV.length; i++)
{
  $('[fname = ' + arrCSV[i] + ']:first',$table).closest('tr').appendTo($table);
}

var$table=$（“#”+tableId）；
对于（变量i=0；i

等一下

$('#' + tableId)

去我的桌子

查找fname属性等于i的任何内容

.eq(0)

给我上一个表达式的第一项

.parents('tr')

.appendTo('#' + tableId);

查找TR类型的父级

.eq(0)

给我上一个表达式中的第一个

.parents('tr')

.appendTo('#' + tableId);

将该TR添加到#myTable

---

好的。现在我已经把它分解了，你只是在复制一个表行吗？如果是这样，那么.append（）不是您的问题，而是选择器的选择。让我在这里更加困惑的是，唯一具有fname属性的标记是您的TR，那么您为什么要去找他们的父母（）并寻找第一个TR？您基本上要求将TR标记放在TR标记中，但这不是您的标记示例所显示的内容。

我建议尽可能少地查找元素。使用感兴趣的属性值作为键，将所有匹配行存储到“哈希”中。浏览CSV，从散列中选择相应的行，将其放入数组中，最后使用以前找到的jQuery对象将数组的元素附加到表中

var table = $('#' + tableId);
var rowHash = {};
table.find('[fname]').each( function() {
    rowHash[$(this).attr('fname')] = $(this).closest('tr');
});
var rows = [];
for (var i = 0; i < arrCSV.length; ++i)
{
    var row = rowHash[arrCSV[i]];
    if (row) {
       rows.push(row);
    }
}
$(rows).appendTo(table);

var table=$（'#'+tableId）；
var rowHash={}；
table.find（'[fname]'）。每个（函数（）{
rowHash[$（this.attr（'fname'）]=$（this.nexist（'tr'）；
});
var行=[]；
对于（变量i=0；i

---

编辑：这似乎是对我以前的代码的一个轻微改进，在我以前的代码中，我将发现的每一行追加到表中。我在一个有1000行的表上进行了测试，对一个需要完全反转的表进行排序似乎需要大约1秒的时间。

如果只想附加一次html（如learningjquery.com文章），请尝试以下操作：

$(document).ready(
function()
{
   var arrCSV = ['f2', 'f1'];
   var tableId = 'mainTable';
   var newTable = [];
   for (var i = 0; i < arrCSV.length; i++)
   {
      var row = $('#' + tableId)
                .find('[fname = ' + arrCSV[i] + ']')
                .eq(0)
                .parents('tr')
                .eq(0);

      newTable.push(row.html());
   }                    

   $('#' + tableId).html(newTable.join(''));
};
});

---

EDIT:正如tvanfosson所指出的，此代码假定ARRCCSV包含所有行的属性。最后一个表将只包含ARRCVSV中存在的行。此外，此代码不会从原始表复制'thead'，'tfoot'部分，尽管编写这样的代码应该很容易

啊。。对不起，我的错。fname属性位于而不是上。如果要使用HTML进行追加，则需要确保删除以前的元素，否则不会对表重新排序，而只是在末尾添加重复的元素。请检查下面我的答案（已更正、更新和测试），看看它是否足以提高您的性能，从而可以使用appendTo移动元素并消除显式删除它的需要。我可能遗漏了一些内容。你能告诉我代码中哪一行得到了TRs的HTML吗？谢谢你的帮助！它不是通过HTML添加的。它获取实际元素并附加它们。$（rows）.appendTo（table）行接受rows数组中的每个元素，并将其依次追加到表中。我觉得很快。有50-100行（可能更多）行，这似乎是瞬间的。谢谢。使用上面的代码，我能够将它从67毫秒降到43毫秒。我希望有一种方法可以进一步优化它。这假设表中的每一行都由CSV排序——或者不匹配的行应该被删除。这可能没问题，但你应该意识到这一点。是的，你是对的。我将编辑我的文章来反映这一点。我可以不使用find和custom属性重写吗？不幸的是，我不能在我的情况下使用id

  ('#' + arrCsv[i]).parent('tr')