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

对于每个分组，获取内部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 2

您可以使用split在'----'处分割文本，并与值合并（为方便起见添加了br s，因此我使用html而不是{{1} }）：

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

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中动态创建步骤号

4 个答案: