Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru Сниппеты JS Сниппеты Раскрашиваем буквы в тексте с помощью jQuery

Раскрашиваем буквы в тексте с помощью jQuery


     28.03.2013    JS Сниппеты    3181

Простенький скрипт для раскраски букв в слове в разные цвета
CSS:

.splitWord .char1  {color:red;}
.splitWord .char2  {color:green;}
.splitWord .char3  {color:blue;}
.splitWord .char4  {color:yellow;}
.splitWord .char5  {color:orange;}
.splitWord .char6  {color:yellowgreen;}
.splitWord .char7  {color:cyan;}
.splitWord .char8  {color:gold;}
.splitWord .char9  {color:pink;}
.splitWord .char10 {color:magenta;}


HTML:
<h2 class="splitWord">Lorem Ipsum</h2>


JS:
// Заворачиваем буквы в span
$('.splitWord').children().andSelf().contents().each(function() {
    if (this.nodeType == 3) {
        $(this).replaceWith($(this).text().replace(/(\w)/g, "<span class='char'>$&</span>"));
    }
});

// Добавляем классы .char1, .char2, .char3, ...

$('.splitWord').each(function() {
    $('span.char', this).each(function(i) {
        i = i+1;            
        $(this).addClass('char' + i);
    });
});
Демо

Комментарии пользователей (5)

shamanim
1

166 | 30

shamanim - 28 марта 2013 21:49 - Юзер

если подобрать цвета градиента, будет смотреться лучше ;)

ПафНутиЙ
1063

3392 | 2433

ПафНутиЙ - 28 марта 2013 22:05 - Админ

Это лишь сниппет)
раскрасить можно как угодно)

Каков вопрос - таков и ответ. Просто помните об этом.

Gopr
10

494 | 164

Gopr - 2 марта 2014 00:49 - Юзер

Возможно ли применить такое для тегов?
Есть облако тегов, пример: тег1, тег2, тег3, тег4, тег5, тег6, тег7, тег8, тег9, и тд...
Как сделать так: тег1, тег2, тег3, тег4, тег5, тег6, тег7, тег8, тег9, и тд...???

ПафНутиЙ
1063

3392 | 2433

ПафНутиЙ - 2 марта 2014 01:28 - Админ


Каков вопрос - таков и ответ. Просто помните об этом.

Дмтрий Антонов
1

Дмтрий Антонов - 9 августа 2016 16:57 - Юзер

Друзья подскажите пожалуйста как быть если текст русский? Этот плагин с ним не работает. Как произвести транслитерацию?

Чтобы комментировать - войдите или зарегистрируйтесь на сайте