Question

使用以下来源：

<div id="addons">
    <div class="addon"> 
        <span class="title"><input type="checkbox" value="addon_1" name="Item 1 title"></span>
        <span class="cost">$<em>20</em></span>
    </div>
    <div class="addon"> 
        <span class="title"><input type="checkbox" value="addon_2" name="Item 2 title"></span>
        <span class="cost">$<em>45</em></span>
    </div>
    <div class="hidden" id="summaries">
        <input name="addons_titles" id="addons_titles" type="text" value=""><!-- on checkbox click, add item titles -->
        <input name="addons_cost" id="addons_cost" type="text" value=""><!-- on checkbox click, total item cost -->
    </div>
</div><!-- end addons -->

我正在尝试

将“ .addon .title输入[名称] ”中的标题汇总为输入#addons_titles （每个标题用竖线字符分隔 - 例如：“项目1标题|第2项标题“）
以及从“ .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建议使用数组并将项目推入阵列可以提供更好的性能。由于通常创建一个数组，将项目推入其中然后将项目连接在一起会产生一个小的开销我很有意思的具体数字在哪里，所以我运行了以下测试：

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毫秒。在这种情况下，它真的取决于选择器......在大多数情况下，它是微观优化我同意，但如果你正在处理项目列表，最好以一种从一开始就扩展的方式来做。（当然，假设它有增长的潜力）

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

2 个答案: