УрокСкрипт, который меняет цвет первого слова в строке

Дизайнеры - люди творческие, поэтому на них обижаться нельзя. Недавно один товарищ прислал мне макет, в котором первое слово каждого заголовка было выделено другим цветом. Пошуршав по просторам веба, и не найдя готового решения, пришлось писать своё.

Собственно, сам скрипт:

(function($) {
  $.fn.paintFirstWord= function(color) {
    var str = this.text();
    var splited = str.split(' ');
    var replaced = str.split(splited[0]).join('<span style = "color:' + color + ';">' + splited[0] + '</span>');
    this.html(replaced);
  };
})(jQuery);

Использование:

$('h1, h2, h3').paintFirstWord('#2a8eb8');

Селекторы, само собой, можно выбирать любые. Просто в моём случае это касалось именно заголовков.

Комментарии

Аватар пользователя Евгений
Евгений написал:

В CSS3 это проблема решается одной строчкой.
Все браузеры поддерживают это свойство. Кроме ИЕ ниже кажется 9. Ну это обычное дело уже.

02.11.2011 05:49
Аватар пользователя xandeadx
xandeadx написал:

интересно посмотреть на эту строчку

02.11.2011 06:35
Аватар пользователя Spleshka
Spleshka написал:

Присоединяюсь к предыдущему комментарию. Я тоже очень хочу увидеть эту строку.

02.11.2011 14:48
Аватар пользователя Александрp
Александрp написал:

В CSS3 это проблема решается одной строчкой????

20.04.2015 15:26
Аватар пользователя Bla5phemer
Bla5phemer написал:

не забываем это всё дело обернуть в

(function($) {
 
$(document).ready(function() {
  $('h1 a').paintFirstWord('#258bbf');
});
 
})(jQuery);

а то понапишуть тут, сиди голову ломай))

22.11.2011 16:57
Аватар пользователя Владимир_1
Владимир_1 написал:

У меня почему-то при использовании склеивает все заголовки.

15.01.2013 14:42
Аватар пользователя ddorosh
ddorosh написал:

У меня та же проблема. Все заголовки на странице с указанным классом склеились :(

27.03.2013 15:01
Аватар пользователя Sinoptik-21
Sinoptik-21 написал:

Если на одной странице несколько заголовков, лучше использовать
$('h1, h2, h3').each( function() {
$(this).paintFirstWord('#2a8eb8');
});
чтобы заголовки не склеивались

26.10.2013 10:29

Комментировать