使用jquery收集多个输入字段并插入到单个字段中

我有4个输入文本字段，和一个单独的文本字段，应该从每个字段收集值

<input type="text" class="collector">

<input type="text" class="collected">
<input type="text" class="collected">
<input type="text" class="collected">
<input type="text" class="collected">

任何暗示都将不胜感激。谢谢

var text= "";
$(".collected").each(function(){
   text += "|" + $(this).val();
});

$(".collector").val(text.substring(1,text.length));

示例：

尝试以下方法：

$('input.collector').val(function() {
    return $(".collected").map(function() {
        return $(this).val() || 'NULL';
    }).get().join('|');
});

---

演示

谢谢，但我得到了结果：未定义的|数据1 | |数据3 |数据4。Null只是空的，这没关系。但在4个字段中，我得到了5个（奇怪的是，第一个字段总是：未定义）。谢谢，阿加尼刚刚更新了代码，再试一次，看看小提琴。我把它记下来了。是的，现在工作得很好。为了最终用户的可读性，我需要一个比空更好的Null，尽管空更有效。谢谢，回答得很好。很好地结合原生js和jquery的方法。

$('input.collector').val(function() {
    return $(".collected").map(function() {
        return $(this).val() || 'NULL';
    }).get().join('|');
});