javascript - jQuery find elements then make into comma separated list - Stack Overflow

admin管理员组

文章数量:1289845

I have numerous text boxes on my page, and I want to add the values from them to another element when a button is clicked. However, my current code outputs the values like this:

Value oneValue twoValue three

I would much prefer for them to e out like this instead:

Value one, Value two, Value three

my current JS is like this:

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

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

I have numerous text boxes on my page, and I want to add the values from them to another element when a button is clicked. However, my current code outputs the values like this:

Value oneValue twoValue three

I would much prefer for them to e out like this instead:

Value one, Value two, Value three

my current JS is like this:

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

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

• javascript
• jquery

Share Improve this question Follow edited Apr 7, 2016 at 16:24 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Apr 7, 2016 at 16:20 Sam WillisSam Willis 4,21177 gold badges4444 silver badges6363 bronze badges 1

• 3 @u_mulder I did what's the problem – digglemister Commented Apr 7, 2016 at 16:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

The issue is because the elements are all being interpreted together. To fix that you can map() the text values to an array and join() it:

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

Working example

The above is assuming .output-box is a standard element. If it's another textbox, you'd need to use val(textInput).

---

Update: Oct 2020

The above example can now also be made more succinct by using an ES6 arrow function, but note that this is unsupported in IE.

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

You can iterate through each input and then using join

var textInput = [];
$(".random-input").each(function() {
  textInput.push(this.value)
});

$(".output-box").append(textInput.join(', '));

<script src="https://ajax.googleapis./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 code is moved to the jQuery function 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();
    }
});

Usage:

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

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

本文标签： javascriptjQuery find elements then make into comma separated listStack Overflow