Javascript .each（）函数仅输出数组中的最后一个结果

我有绳子。然后我将字符串拆分成一个数组

我使用

.each（）

逐个遍历数组并生成特定的输出

但是，当我尝试这样做时，我只得到输出的数组中的值

怎么会这样

我已经建立了一个JSFIDLE来演示我到目前为止所做的尝试以及我得到的结果：

---

我试图实现它，用户输入文本，点击提交，然后返回输入给他们，但是每次他们单击submit时，它都会替换当前输出。

您重复地将output元素的值设置为每个连续的数组值，您将看到的唯一一个值就是设置的最后一个值，这正是您的JSFIDLE显示的值

.text（）

将当前内容替换为新内容。它不会将内容添加到已经存在的内容中

---

如果您描述了您试图解决的实际问题，我们可以更好地建议使用isntead的代码。我怀疑您是否真的想使用

.append（）

，因为将一个字符串分成几段，然后一次只将它们全部追加到一起是愚蠢的。你一定想做比这更有趣的事情。

你在这里做的只是在每次迭代中覆盖

#output

的

.text（）

值

您应该尝试使用

.append（）

函数

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

或者，为了解释，你也可以这样做-

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

---

您正在不断更新#输出，唯一留下的是上一次迭代中的val

请尝试使用.append（）代替文本 更新的演示：

请参见此处或

您正在用

.text

在代码中，您可以看到我将旧的结果集附加到新的结果集，因此一切看起来都很好

希望这有帮助

代码

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

试试这个

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

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

---

这是因为

text（）

函数将在每次调用元素时替换元素的内部文本。您可以简单地将文本替换为

append（）

，以代替追加文本，尽管这不会格式化

如果你想格式化你的输出，你可以这样做；

var string='这是一个字符串'；
stringArray=string.split（“”）；
$.each（字符串数组、函数（索引、值）{
var div=$（''）.text（索引+'：'+值）
$（'#output'）。追加（div）；
});

要清除输出并在每次按下按钮时更新，以便他们每次单击“提交”时都会替换当前输出，您可以执行以下操作：

$（“#提交”）。单击（函数（）{
var value=$（'#value'）.val（）；
变量数组=值。拆分（“”）；
变量输出=$（“#输出”）；
output.empty（）；
$.each（数组、函数（索引、值）{
output.append（“”+index+“”）：“”+value+“”）；
});
});

text（）

函数不会将文本追加到

输出

中，因此您看到的是上次替换的结果

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

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

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

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

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

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

$('#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>');
    });
});

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

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