简单的jQuery：向文本框添加多个值

使用以下来源：

 
  $20 
 
  $45 
 
   
 
 

我试着

• 将标题从“ .addon .title input [name] ” 汇总到输入#addons_titles （每个标题用竖线字符分隔 – 例如：“Item 1 title | Item 2 title”）
• 和项目总成本从“ .addon .cost em ”到输入#addons_cost

任何想法非常感谢 – 谢谢！

Answer 1

瓷砖：

 var result = ''; $(".addon .title input").each(function(i, n) { result += (result.length > 0 ? "|" : "") + $(n).attr("name"); }); 

和：

 var sum = 0; $(".addon .cost em").each(function(i, n) { sum += parseInt($(n).text()); }); 

设置值：

 $('#addon_titles').val(result); $('#addon_cost').val(sum); 

Nick Craver建议使用数组并将项目推入arrays可以提供更好的性能。 由于通常创建一个数组，将项目推入其中然后将项目连接在一起会产生一个小的开销我很有趣的具体数字在哪里，所以我运行了以下测试：

 var startTime, endTime, i, result; startTime = new Date().getTime(); for (i = 1; i < 50000; ++i) { result = ''; $(".addon .title input").each(function(i, n) { result += (result.length > 0 ? "|" : "") + $(n).attr("name"); }); } endTime = new Date().getTime(); $("#method1").html('Method 1: ' + ((endTime - startTime)) + ' ms.'); startTime = new Date().getTime(); for (i = 1; i < 50000; ++i) { result = new Array(); $(".addon .title input").each(function() { result.push($(this).attr("name")); }); $('#addon_titles').val(result.join('|')); } endTime = new Date().getTime(); $("#method2").html('Method 1: ' + ((endTime - startTime)) + ' ms.'); 

测试结果表明，第一种方法（字符串连接）花费了4926 ms，而第二种方法花费了10359 ms。 所有测试均基于OP中提供的样本数据。

然后我想知道第二种方法的收支平衡点是什么，所以我增加了输入字段的数量。 收支平衡约有24项。

因此，作为结论，如果您有少量项目连接提供更好的性能，而超过24使用数组的方法更好。

Answer 2

Obalix有正确的说法，但在瓷砖上你可以大大提高性能：

 var result = new Array(); $(".addon .title input").each(function() { result.push($(this).attr("name")); }); $('#addon_titles').val(result.join('|')); 

因为基准测试总是很有趣，所以这是对性能数组与字符串连接的另一个测试，当你将jQuery选择器性能从等式中取出时，你实际上是在比较不同的部分：

  $(function(){ var startTime, endTime, i, result; startTime = new Date().getTime(); result = ''; for (i = 1; i < 5000000; ++i) { result += (result.length > 0 ? "|" : "") + "attribute"; } endTime = new Date().getTime(); $("#method1").html('Method 1: ' + ((endTime - startTime)) + ' ms.'); startTime = new Date().getTime(); result = new Array(); for (i = 1; i < 5000000; ++i) { result.push("attribute"); } result.join('|'); endTime = new Date().getTime(); $("#method2").html('Method 2: ' + ((endTime - startTime)) + ' ms.'); }); 

在该机器上，方法1：3715毫秒，方法2：927毫秒。 在这种情况下，它真的取决于选择器......在大多数情况下，我是一致的微优化，但是如果你正在处理一个项目列表，那么最好从一开始就进行扩展。 （当然，假设它有增长的潜力）