通过添加数字动态更改相同 class 的 class 名称

Question

最后一个问题..如何通过添加数字动态更改 class 相同乐器的名称？

<div class="score">
  <div class="system">
    <div class="stff_Flute"></div>
    <div class="stff_Flute"></div>
    <div class="stff_Clarinet"></div>
  </div>
  <div class="system">
    <div class="stff_Flute"></div>
    <div class="stff_Flute"></div>
    <div class="stff_Clarinet"></div>
  </div>
</div>

为了这个?...

<div class="score">
  <div class="system">
    <div class="stff_Flute_1"></div>
    <div class="stff_Flute_2"></div>
    <div class="stff_Clarinet"></div>
  </div>
  <div class="system">
    <div class="stff_Flute_1"></div>
    <div class="stff_Flute_2"></div>
    <div class="stff_Clarinet"></div>
  </div>
</div>

我有这个代码https://jsfiddle.net/7cLoxn29/1/但是出了点问题...

Answer 1

我不太喜欢 jQuery，所以我为您创建了一个 vanilla JS 解决方案（希望没问题！）：

let parents = document.querySelectorAll(".system")
parents.forEach((parent) => {
  let children = parent.querySelectorAll("div")
  children = Array.from(children).reduce((accumulator, current) => {
    if (current.className in accumulator) {
      accumulator[current.className].push(current)
    } else {
      accumulator[current.className] = [current]
    }
    return accumulator
  }, {})

  for (var key in children) {
    if (children[key].length > 1) {
      children[key].forEach((child, i, target) => {
        child.className = `${child.className}_${i+1}`
      })
    }
  }
})

注意这是ES2015 JS代码。

这是更新后的 fiddle：https://jsfiddle.net/7cLoxn29/5/

通过添加数字动态更改相同 class 的 class 名称

Dynamicaly change class name of same class by adding number

javascript

classname