jquery - JQuery：如何遍历所有字符并为不同的 DIV 更改每个字母的颜色

Question

我正在尝试修改此页面上的代码：jQuery：如何遍历 <p> 段落中的所有字符？

...但要在不同的 DIV 上使用：

var $p = $('.couleurs');

var array = $p.text().split('');

var colors = ['bleu','orange','vert','rose','rouge'];

$.each(array, function( i ) {
array[i] = '<span class="' + colors[ i % 5 ] + '">' + array[i] + '</span>';
});

$p.html(array.join(''));

我现在的问题是，如果我在不同的 DIV 上使用“.couleurs”类，则会添加以前具有此类的 div 中的文本。像这样：

<div class="couleurs">Some text</div>
<div class="couleurs">More text</div>

...将显示：

一些文字更多文字

任何人都可以帮忙吗？

Answer 1

将整个内容包装在一个中，each()以便它为所有段落单独运行。您的代码的问题在于它试图同时处理所有段落。

var $p = $('.couleurs');
var colors = ['bleu','orange','vert','rose','rouge'];

$p.each(function () {
    var array = $(this).text().split('');

    $.each(array, function( i ) {
        array[i] = '<span class="' + colors[ i % 5 ] + '">' + array[i] + '</span>';
    });

    $(this).html(array.join(''));
});

一个小演示

Answer 2

您需要分别处理每个div。例如（代码的变体）：

var colors = ['bleu', 'orange', 'vert', 'rose', 'rouge'];

$('.couleurs').html(function() {
    return $.map($(this).text().split(''), function(el, i) {
        return '<span class="' + colors[i % 5] + '">' + el + '</span>';
    }).join('');
});

http://jsfiddle.net/dfsq/22eED/

jQuery 在内部使用each循环匹配的 div 集。