Question

以下div框中有多个spans类。我需要改变跨度的类。

<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，直到最大值为ing-tag_4。

这需要从索引中完成。例如，如果我得到索引4并且最大span类具有7.

然后从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变为document.querySelectorAll('.step_input > .ing-tag_'+4).forEach(e => e.id = e.id-1 );。还需要删除缺少ing-tag_4的范围。在step_input类内部或显示缺失的那个。

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

if(average_volume <= 1000000) 
    //use this condition: open_price > 10 && current_volume > 1000000
else 
    //use this condition: open_price > 10 && current_volume > average_volume

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>

Answer 2

这是我将如何做到的：

获取所有span元素：

var spanAll = document.querySelectorAll('span');

获取每个span的班级编号：

var spanClassNumberAll = [...spanAll].map(function(s){
  return s.className[s.className.length -1];
});

确定最大数量：

var maxVal = Math.max(...spanClassNumberAll);

返回属于index和maxVal范围的所有元素：

var indexVal = '4';
var matches = [...spanAll].filter(function(el){
  var thisNumVal = el.className[el.className.length -1];
  return thisNumVal >= indexVal && thisNumVal <= maxVal;
});

从每个span的className

中减去

matches.forEach(function(s){
  var thisNumVal = s.className[s.className.length -1];
  var newNumVal = thisNumVal - "1";
  if(thisNumVal == indexVal){
    newNumVal = 'missing';
  }
  //concatenate new className
  //split the className by underscore(_)
  s.className = s.className.split('_')[0] + '_' + newNumVal;
}

Demo

需要从span类

2 个答案: