Как изменить стиль первого слова в тексте при помощи jQuery

В CSS есть возможность задать отдельные стили для дочернего элемента или для строки текста, выбирая его по счету. Речь идет о псевдо-классе :nth-child(n), где n — это порядковый номер элемента. Но, чтобы выбрать первое слово в строке или блоке, это свойство стиля не подойдет. как и не найдется другого, способного справиться с этой задачей. Если стоит задача обработать таким образом, например заголовок категории Joomla или WordPress, то просто html здесь также не поможет, т.к. заголовок берется из базы, как значение поля, которое вы заполняете в админке. Потому для этого будем использовать jQuery.

Сразу приведу весь код, потом будем его разбирать:

Подключаем jQuery, или удостоверяетмся, что в шаблоне он подключен:

Затем правим html шаблона. Задаем заголовку класс, в нашем случае это page-title. С этим классом мы будем дальше работать.
Теперь рассмотрим скрипт:

Вводим некоторую переменную a, котором задаем значение, равное внутренностям text_cont_inner. Задаем его через .html().

Далее новой переменной b задаем значение позиции первого в строке a.

Для точности, нужно ввести проверку наличия больше, чем одного слова в нашей строке.

Здесь используется -1, так как, если в строке будет только одно слова, то есть строка без пробелов, то b = a.indexOf(‘ ‘) выдает -1. Если пробела нет, то b у нас равно длине строки a.length.

И последний пункт — в наш заголовок с классом page-title выводим открытие small’а, в него подстроку от 0 до b, закрываем small и после него выводим подстроку от b до конда, т. е. до индекса a.length.

Результат:

Свежие новости

Аналогично можно работать с массивом:

 

comments powered by HyperComments