jQuery查找元素，然后组成逗号分隔的列表

jQuery find elements then make into comma separated list

本文关键字：分隔 列表 查找 元素 然后 jQuery      更新时间：2024-03-04

我的页面上有很多文本框，我想在单击按钮时将其中的值添加到另一个元素中。然而，我当前的代码输出的值如下：

Value oneValue twoValue three

我更喜欢他们这样出来：

Value one, Value two, Value three

我当前的JS是这样的：

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

问题是因为所有元素都被一起解释。要修复此问题，您可以将文本值map()添加到数组中，并将其join()添加到中

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

工作示例

以上假设.output-box是标准元件。如果是另一个文本框，则需要使用val(textInput)。

更新：2020年10月

上面的例子现在也可以通过使用ES6箭头函数变得更加简洁，但请注意，这在IE中是不受支持的

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

您可以遍历每个输入，然后使用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>

@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/

相关文章：