показать метку рядом с каждой строкой в ​​textarea

Question

Что я хочу сделать, это поставить метки рядом с каждой строкой в ​​текстовом поле, мне нужно петли метки по 5 строк.

Im пытается использовать пользователя jQuery numberedTextarea Plugin и вместо отображения номеров строк Я хочу показать метки. Я пытаюсь играть с этой функцией и вставлять в нее переключатель.

function renderLineNumbers(element, settings) { 
    element = $(element); 

    var linesDiv = element.parent().find('.numberedtextarea-line-numbers'); 
    var count = element.val().split("\n").length; 
    var paddingBottom = parseFloat(element.css('padding-bottom')); 

    linesDiv.find('.numberedtextarea-number').remove(); 

    for(i = 1; i<=count; i++; x++) { 
     var line = $('<div class="numberedtextarea-number numberedtextarea-number-' + i + '">' + i + '</div>').appendTo(linesDiv); 

     if(i === count) { 
      line.css('margin-bottom', paddingBottom + 'px'); 
     } 
    } 
} 

Есть идеи?

PS Извините за мой плохой английский

Answer 1

1.Tweak renderLineNumbers - функция:

function renderLineNumbers(element, settings) { 
    element = $(element); 

    var linesDiv = element.parent().find('.numberedtextarea-line-numbers'); 
    var count = element.val().split("\n").length; 
    var paddingBottom = parseFloat(element.css('padding-bottom')); 
    var j = 0; 

    linesDiv.find('.numberedtextarea-number').remove(); 

    for (i = 1; i <= count; i++) { 
     if (settings.labels && j == settings.labels.length) { 
     j = 0; 
     } 
     var lineLabel = settings.labels ? settings.labels[j] : i; 
     var line = $('<div class="numberedtextarea-number numberedtextarea-number-' + i + '">' + lineLabel + '</div>').appendTo(linesDiv); 
     j++; 

     if (i === count) { 
     line.css('margin-bottom', paddingBottom + 'px'); 
     } 
    } 
    } 

2.Define массив с ярлыках, лейблах, установите это в качестве дополнительной опции при инициализации плагина

var labels = ['line1', 'line2', 'line3', 'line4']; 
$('textarea').numberedtextarea({labels: labels}); 

---

Example