Получение первого символа (буквы) в тексте на jQuery.

24.12.2014 13:11:54
Предположим, есть задача: Нужно всем первым буквам абзацев назначить изменить визуальное оформление.
Сделаем маленький плагин для такого дела.

Код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
(function($){
    $.fn.liFirstLetter = function(params){
        var p = $.extend({
            tag: 'span',
            classEl: 'firstletter'
        }, params);
        return this.each(function(){
            var el = $(this);
            htmlreplace(el);
            function htmlreplace(el) {
                $(el).contents().each(function(){
                    if (this.nodeType == 3) {
                        $(this).wrap('<span class="li"/>');
                        return false
                    }else {
                        htmlreplace(this);
                    };
                });
            };
            var arr = $('.li:first').html().split('');
            var arrFirst = arr.shift();
            var newFirst = '<'+p.tag+' class="'+p.classEl+'">'+arrFirst+'</'+p.tag+'>';        
            arr.unshift(newFirst);
            $('.li:first').html(arr.join(''));
            $('.li').each(function(){$(this).after($(this).html()).remove()});
        });
    };
})(jQuery);

Пример использования:

1
2
3
4
    $('.breadcrumb a').liFirstLetter({
        tag: 'span',
        classEl: 'firstletter'
    });

Все первые буквы будут обернуты в span с классом firstletter


Категории: JQuery UI
Яндекс.Метрика