在 jquery 中动态创建步数

Question

我讨厌手动输入步数。所以我试图编写一个小函数来查找一些文本并将其替换为生成的步骤编号。
而且我不能使用 ol/li 标签，因为我在页面上有多个组。所以我需要在数字后面添加一个 "a"、"b" 等。

我的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

您可以使用 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>

Answer 2

对于每个分组，获取内部 html 并按换行符拆分它
如果它以“----”开头，请将其替换为递增的行号，并附加 v 值。
将 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

首先，我建议将这些组包装到某种标签中。例如，跨度：

<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));
  });
});

在 jquery 中动态创建步数

Creating step numbers dynamically in jquery

javascript

jquery

increment