jquery - 简单的 jQuery : Adding multiple values to textboxes

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 input[name]”到input#addons_titles的标题(每个标题用竖线字符分隔 - 例如:“Item 1 title |第 2 项标题")
• 以及从“.addon .cost em”到input#addons_cost的总商品成本

非常感谢任何想法 - 谢谢!

Answer 1

图 block :

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 毫秒，而第二种方法耗时 10359 毫秒。所有测试均基于 OP 中提供的示例数据。

然后我想知道第二种方法的收支平衡点是多少，所以我增加了输入字段的数量。盈亏平衡点约为 24 个项目。

因此，作为结论，如果项目数量较少，串联可提供更好的性能，而超过 24 个时，使用数组的方法会更好。