javascript - 需要从跨度类中减少 1

Question

下面的div框中有多个span类。我需要更改跨度的类别。

<div class="step_input" contenteditable="true">
  The class of div is same
  <span class="ing-tag_0"> The data to be changed </span> Need one with worker <span class="ing-tag_0"> The data to be changed </span> allocation to work
  <span class="ing-tag_1"> The data not to be changed </span>
   <span class="ing-tag_2"> The data not to be changed </span>
    <span class="ing-tag_3"> The data not to be changed </span>
</div>
<div class="step_input" contenteditable="true">
  This one has same class of span
  <span class="ing-tag_0"> The data to be changed </span> only
  <span class="ing-tag_1"> The data to be changed </span>more data is here and this is all giberish  <span class="ing-tag_3"> The  changed </span> and <span class="ing-tag_4"> The data to be changed </span> cloth manufacturing erp <span class="ing-tag_5"> The data to be changed </span>. Need  <span class="ing-tag_6"> The data not to be changed </span>one with worker  allocation to work
</div>
<div class="step_input" contenteditable="true">
  <span class="ing-tag_0"> qweq </span> Need one with worker allocation to work <span class="ing-tag_0"> qweq </span>
   <span class="ing-tag_5"> qweq </span>
    <span class="ing-tag_6"> qweq </span>
     <span class="ing-tag_7"> qweq </span>
</div>

如果我需要从标签类中减少 1，我需要它。例如ing-tag_1变成ing-tag_0，ing-tag_2变成ing-tag_1直到最大。

这需要通过索引来完成。例如，如果我得到索引 4，最大跨度类为 7。

然后从ing-tag_4开始到ing-tag_7。 ing-tag_5 变为 ing-tag_5，ing-tag_6 变为 ing-tag_5，ing- tag_7 变为 ing-tag_6 且 ing-tag_4 变为 ing-tag_missing。并且还需要删除缺失的跨度 -标签_4。在step_input类中或者显示缺失的那个。

到目前为止我已经尝试过

document.querySelectorAll('.step_input > .ing-tag_'+4).forEach(e => e.id = e.id-1 );

Answer 1

这可以满足您的要求，并且不依赖于类名称的特定定位，因为可以添加其他类。

请注意，它假定每个元素只有一个符合您所需格式的类。

但是，为此使用类并不是很好。 data- 属性似乎会更好。

var re = /ing-tag_(\d+)/;

function decrement(idx) {
  var spans = document.querySelectorAll('.step_input > span[class*=ing-tag_]');

  for (const span of spans) {
    // Use replace with a callback to get the captured index number
    span.className = span.className.replace(re, function(m, g1) {
      if (+g1 < idx) { // Below the index, don't change anything
        return m;
      }
      if (+g1 === idx) { // Equal index, add "missing"
        return "ing-tag_missing";
      }
      return "ing-tag_" + (+g1 - 1); // Above the index, decrement
    });
  }
}

decrement(4);

console.log(document.body.firstElementChild.innerHTML);

<div>

  <div class="step_input" contenteditable="true">
    The class of div is same
    <span class="ing-tag_0"> The data to be changed </span> Need one with worker <span class="ing-tag_0"> The data to be changed </span> allocation to work
    <span class="ing-tag_1"> The data not to be changed </span>
    <span class="ing-tag_2"> The data not to be changed </span>
    <span class="ing-tag_3"> The data not to be changed </span>
  </div>
  <div class="step_input" contenteditable="true">
    This one has same class of span
    <span class="ing-tag_0"> The data to be changed </span> only
    <span class="ing-tag_1"> The data to be changed </span>more data is here and this is all giberish
    <span class="ing-tag_3"> The  changed </span> and
    <span class="ing-tag_4"> The data to be changed </span> cloth manufacturing erp
    <span class="ing-tag_5"> The data to be changed </span>. Need <span class="ing-tag_6"> The data not to be changed </span>one with worker allocation to work
  </div>
  <div class="step_input" contenteditable="true">
    <span class="ing-tag_0"> qweq </span> Need one with worker allocation to work
    <span class="ing-tag_0"> qweq </span>
    <span class="ing-tag_5"> qweq </span>
    <span class="ing-tag_6"> qweq </span>
    <span class="ing-tag_7"> qweq </span>
  </div>

</div>