I have string. I then split the string to make an array.

I use .each() to hopefully iterate through the array one by one and produce a certain output.

However, when I try to do this, I only get the value in the array outputted.

How es?

I have set up a jsfiddle to demonstate what I have tried so far and the result I am getting:

/

var string = 'this is a string';
stringArray = string.split('');

$.each(stringArray, function(index, value){
    $('#output').text(index + ' : ' + value);
});​

I am trying to achieve it where user inputs text, clicks submit and it returns there input to them, but every time they click submit it replaces the current output.

I have string. I then split the string to make an array.

I use .each() to hopefully iterate through the array one by one and produce a certain output.

However, when I try to do this, I only get the value in the array outputted.

How es?

I have set up a jsfiddle to demonstate what I have tried so far and the result I am getting:

http://jsfiddle/S7Z6K/2/

var string = 'this is a string';
stringArray = string.split('');

$.each(stringArray, function(index, value){
    $('#output').text(index + ' : ' + value);
});​

I am trying to achieve it where user inputs text, clicks submit and it returns there input to them, but every time they click submit it replaces the current output.

• javascript
• jquery
• html

8 Answers 8

see here http://jsfiddle/S7Z6K/4/ or http://jsfiddle/S7Z6K/6/

You are overwriting the old result set with .text

In the code you can see I am appending old result set to new one's hence everything appears fine.

hope this helps!

code

var string = 'this is a string';
    stringArray = string.split('');
    var hulkfoo = "";
    $.each(stringArray, function(index, value){
        hulkfoo += index + ' : ' + value + " -- "; 
        $('#output').text(hulkfoo);
    });​

You are repeatedly setting the value of the output element to each successive array value and the only one you will see is the last value that is set and that is indeed exactly what your jsFiddle shows.

.text() replaces the current contents with new contents. It does not add content to what is already there.

We could advise better what code to use isntead if you described the actual problem you're trying to solve. I doubt you really want to use .append() because it's silly to split a string into it's pieces and then just append them all together again one character at a time. You must be wanting to do something more interesting than that.

What you are doing here is simply overriding the .text() value of #output with each iteration.

You should try using the .append() function.

$.each(stringArray, function(index, value){
    $('#output').append(index + ' : ' + value);
});​

Alternatively, for explanation's sake, you could also do something like this -

var element = $('#output') // use cache to improve performance
element.text( element.text() + index + ' : ' + value);

Try this....

var string = 'this is a string',
    stringArray = string.split('');

$.each(stringArray, function(index, value){
    $('#output').append(index + ' : ' + value);
});​

You are continuously updating the #output, and the only thing that stays is the val in the last iteration.

try .append() instead of text updated demo : http://jsfiddle/epinapala/S7Z6K/5/

var string = 'this is a string';
    stringArray = string.split('');
    alert(stringArray);
    $.each(stringArray, function(index, value){
        $('#output').append(index + ' : ' + value);
    });​

var string = 'this is a string';
    stringArray = string.split(/\s/);

    $.each(stringArray, function(index, value){
        $('#output').text(function(i, oldText) {
           return oldText += index + ' : ' + value;
        });
    });

DEMO

This is because the text() function will replace the inner text of your element, each and every time that it is called. You could simply replace text with append() in order to append text instead, although this would not be formatted.

If you wanted to format your output you could do something like this; http://jsfiddle/S7Z6K/8/

var string= 'this is a string';
stringArray = string.split('');

$.each(stringArray, function(index, value){
    var div = $('<div></div>').text(index + ' : ' + value)
    $('#output').append(div);
});

To clear the output and update each time the button is pressed so that every time they click submit it replaces the current output you can do something like the following; http://jsfiddle/S7Z6K/15/

$('#submit').click(function(){

    var value = $('#value').val();
    var array = value.split('');
    var output = $('#output');
    output.empty(); 
    $.each(array, function(index, value){
        output.append('<div>' + index + ' : ' + value + '</div>');
    });
});

text() function does not append text to output so what you see is the result of last replace