Динамическое создание номеров шагов в jquery

Question

Ненавижу набирать номера шагов вручную.Поэтому я пытался написать небольшую функцию, чтобы найти какой-нибудь текст и заменить его на сгенерированные номера шагов.
И я не могу использовать теги ol / li, потому что у меня есть несколько групп на странице.Поэтому мне нужно добавить «а», «б» и т. Д. После числа.

Мой HTML:

<span class="grouping" v="a">
----My first step
----This is another
----And another
</span>
<br/>
<span class="grouping" v="b">
----second group
----second group 2
</span>

Это мой jquery (но он не заменяет ---- на номер шага).

$(function(){
    $(".grouping").each(function(){
        var val=$(this).attr("v");
        var counter=1;
        $(this).find(":contains('----')").each(function(){
            $(this).text("("+counter+val+") ");
            counter++;
        });

    });
});

Итакв конце концов, я хочу, чтобы веб-страница заканчивалась следующим образом:

(1a) My first step
(2a) This is another
(3a) And another

(1b) second group
(2b) second group 2

Answer 1

Во-первых, я предлагаю заключить эти группы в какую-нибудь метку.например, span:

<span class="grouping" v="a">
 <span class="grouping-item">My first step</span>
</span>

И так далее, на эти элементы будет проще и быстрее нацеливаться.

Затем создайте одну функцию для поиска по этим новым тегам

$(function(){
  // This will create those numbers
  function createNumbers(el) {
    const mainGroup = el.attr("v");
    const children = el.children(".grouping-item");
    let i = 1;
    children.each(function(){
      const currentText = $(this).text();
      $(this).text( '('+i+mainGroup+')' + currentText );
      i++;
    });
  }
  $(".grouping").each(function(){
    createNumbers($(this));
  });
});

Answer 2

1. Для каждой из групп получите внутренний html и разделите его на новую строку
2. Если он начинается с «----», замените его на увеличивающийся номер строки и добавьте v значение.
3. Поместите HTML обратно в группу.

$('.grouping').each(function(index, grouping){
  var lines = grouping.innerHTML.trim().split("\n");
  var lineNumber = 0;
  var v = grouping.getAttribute('v');
  
  lines.forEach(function(line, index){
    if (line.startsWith('----')) {
      lines[index] = '('+ (++lineNumber) + v +') '+ line.slice(4);
    }
  });
  
  grouping.innerHTML = lines.join('\n');
});

.grouping { white-space: pre; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="grouping" v="a">
----My first step
----This is another
I should not have a line number.
----And another
</span>
<br/>
<span class="grouping" v="b">
I also should not have a line number.
----second group
----second group 2
</span>

Answer 3

.find() не будет работать.Вы должны получить текст элемента и split() его, а затем изменить его с помощью map() и replace() и сбросить text()

$(function(){
    $(".grouping").each(function(){
        
        var val=$(this).attr("v");
        var counter=1;
        let lines = $(this).text().split('\n');
        lines = lines.map(ln => {
          if(ln.includes('----')){
            ln = ln.replace('----',`(${counter}${val})`)
            counter++;
          }
          return ln;
        })
        lines = lines.filter(ln => ln !== '');
        $(this).text(lines.join('\n'));
    });
});

.grouping { white-space: pre; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="grouping" v="a">
----My first step
----This is another
----And another
</span>
<br/>
<span class="grouping" v="b">
----second group
----second group 2
</span>

Answer 4

Вы можете использовать split, чтобы разделить текст на '----' и согласовать со значениями (добавлено br с для упрощения, поэтому я использовал html вместо text):

$(function(){
    $(".grouping").each(function(){
        var val=$(this).attr("v");
        var arr = $(this).html().split('----');
        if(arr.length > 1){
            var str = arr[0], i, l = arr.length;
            for(i = 1; i < l; i++){
                str += '(' + i + val + ') ' + arr[i];
            }
            $(this).html(str);
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="grouping" v="a">
----My first step<br>
----This is another<br>
----And another<br>
</span>
<br/>
<span class="grouping" v="b">
----second group<br>
----second group 2<br>
</span>