时间戳

首页 > 解决方案 > 使用 Javascript 输出跨度中的每个字母

javascript - 使用 Javascript 输出跨度中的每个字母

问题描述

我有这样的代码：

var letter = 'abcd';
var split = letter.split("");
var html = '';
for (var i = 0; i < split.length; i++) {
    html += split[i];
    $('<span/>')
        .data('letter', letter)
        .data('match-count', bins[letter] || 0)   
        .html(letter)
        .appendTo(alphabet);
}

这会输出这样的字母：

<span>abcd</span>
<span>abcd</span>
<span>abcd</span>
<span>abcd</span>

我想要实现的是：

<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>

有人可以帮我解决这个问题吗？

标签： javascriptjquery

解决方案

在您的 for 循环中，您将letter变量的 HTML 文本分配给<span>元素。如果您想在此处添加单个字母，则不会得到它，因为您已经将它们拆分到split变量中（并且letter是完整的字符串）。

相反，您可以使用

 .html(split[i])

但似乎这封信在其他地方被引用。

这也是回顾良好变量命名实践的好机会。letter暗示一个字符，但被赋值'abcd'。稍后在 for 循环中，您打算分配单个字符，但letter变量名具有误导性。

经过一些重构：

var letters = 'abcd';
var split = letters.split("");
var html = '';
for (var i = 0; i < split.length; i++) {
    html += split[i];
    letter = split[i];
    $('<span/>')
        .data('letter', letter)
        .data('match-count', bins[letter] || 0)   
        .html(letter)
        .appendTo(alphabet);
}

我不确定你对html变量的意图是什么，但如果你想让它保存整个字符串，你不需要html += split[i];在循环内部重建它。您可以通过在声明中分配它来简化：var html = letters;

@Yevgren 展示了一种更现代的方法来解决您的尝试（请记住，并非所有浏览器都完全支持它（例如 Internet Explorer 11））。

推荐阅读