jQuery查找元素然后制作成逗號分隔的列表

Question

我的頁面上有許多文本框，我想在單擊按鈕時將它們中的值添加到另一個元素。 但是，我當前的代碼輸出如下值：

Value oneValue twoValue three

我更希望他們像這樣出來：

Value one, Value two, Value three

我現在的 JS 是這樣的：

var textInput = $(".random-input").text();

$(".output-box").append(textInput);

Answer 1

問題是因為所有元素都被一起解釋。 要解決這個問題，您可以將文本值map()到一個數組並join()它：

var textInput = $(".random-input").map(function() {
    return $(this).val();
}).get().join(', ');    
$(".output-box").text(textInput);

工作示例

以上假設.output-box是一個標准元素。 如果它是另一個文本框，則需要使用val(textInput) 。

- 2020 年 10 月更新 -

上面的例子現在也可以通過使用 ES6 箭頭函數變得更簡潔：

var textInput = $(".random-input").map((i, el) => el.value).get().join(', ');    
$(".output-box").text(textInput);

Answer 2

您可以遍歷每個輸入，然后使用join

 var textInput = []; $(".random-input").each(function() { textInput.push(this.value) }); $(".output-box").append(textInput.join(', '));

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' class='random-input' value='val1' /> <input type='text' class='random-input' value='val1' /> <input type='text' class='random-input' value='val1' /> <input type='text' class='random-input' value='val1' /> <input type='text' class='random-input' value='val1' /> <input type='text' class='random-input' value='val1' /> <input type='text' class='random-input' value='val1' /> <div class='output-box'></div>

Answer 3

@Rory McCrossan 代碼移至 jQuery 函數joinVal ：

jQuery.fn.extend({
    joinVal: function (separator)
    {
        if (typeof separator === 'undefined')
            separator = ",";

        var $this = $(this);
        if ($this && $this.length > 1)
            return $this.map(function () { return $(this).val(); }).get().join(separator);
        else
            return $this.val();
    }
});

用法：

var textInput = $(".random-input").joinVal();

https://jsfiddle.net/NickU/4j892h0u/3/