如何在html/jquery中为字符串/单词着色

我正在尝试在HTML中为字符串/单词着色。我在这里找到了一个响应-但是我很难理解如何多次转换为使用该函数

第一个字很好用
第二次-不起作用
变量颜色=[“#635636”、“#FF00C0”、“#990066”、“#FF9966”、“#996666”、“#00FF00”、“#CC9933”]，
idx；
$（函数（）{
var div=$（'拱'）；
var chars=div.text（）.split（“”）；
div.html（“”）；
对于（var i=0；i将div上的id更改为class-

<div class="arch" style="font-size: 40px">First Word work fine</div>
<div class="arch" style="font-size: 40px">Second time - does not work</div>

您只能有一个元素具有特定的
id
。将
id
替换为
class
（或向元素添加特定类），如下所示

<div class="arch" style="font-size: 40px">First Word work fine</div>
<div class="arch" style="font-size: 40px">Second time - does not work</div> 

第一个字很好用
第二次-不起作用

javascript

//code has been update in response of observation made by adeneo, thanks adeneo

var colours = ["#635636", "#FF00C0", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"],
    idx;

$(function () {
    $('.arch').each(function () {
        var div = $(this),
            chars = div.text().split(''),
            span = '';

        div.html('');
        for (var i = 0; i < chars.length; i++) {
            idx = Math.floor(Math.random() * colours.length);
            span = span + $('<div>').append($('<span>' + chars[i] + '</span>').css('color', colours[idx])).html();
        }
        div.append(span);
    });
});

//代码已根据adeneo的观察结果进行了更新，谢谢adeneo
变量颜色=[“#635636”、“#FF00C0”、“#990066”、“#FF9966”、“#996666”、“#00FF00”、“#CC9933”]，
idx；
$（函数（）{
$（'.arch'）。每个（函数（）{
var div=$（此），
字符=div.text（）.split（“”），
span=''；
div.html（“”）；
对于（变量i=0；i

我添加了一些代码以避免频繁更新DOM
，正如Ejay所提到的，它不起作用，因为您使用了ID。一个页面上只能使用一次ID。您想要使用的是类

标记：

<div class="arch">You content</div>

我还更新了JSFIDLE:
您只能有一个元素具有特定的id，但肯定无法工作，
div.text（）
和
div.html（）
将同时对这两个元素工作？我尝试对代码进行最小的更改（用类替换id），它工作正常（在firefox中。在其他浏览器中检查）更新：google chrome和internet explorer也可以使用，所以jQuery可能在做一些魔术，或者识别集合，一次处理一个元素？我不相信你，让我看看它在小提琴中的工作（提示：你可以借用Jay的小提琴，它也有同样的错误。）请相信我：我在Jay的小提琴中也看到彩色字符串
//code has been update in response of observation made by adeneo, thanks adeneo

var colours = ["#635636", "#FF00C0", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"],
    idx;

$(function () {
    $('.arch').each(function () {
        var div = $(this),
            chars = div.text().split(''),
            span = '';

        div.html('');
        for (var i = 0; i < chars.length; i++) {
            idx = Math.floor(Math.random() * colours.length);
            span = span + $('<div>').append($('<span>' + chars[i] + '</span>').css('color', colours[idx])).html();
        }
        div.append(span);
    });
});

<div class="arch">You content</div>

var div = $('.arch');