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

以下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，并且还需要删除丢失ing-tag_4的跨度。在step_input类内部或显示缺失的类。

到目前为止，我已经尝试过

document.querySelectorAll('.step_input > .ing-tag_'+4).forEach(e => e.id = e.id-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>

关于javascript - 需要从跨度类中减少1，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45761292/