Dynamicaly通过添加数字改变同一班级的班级名称

最后一个问题：如何通过添加数字动态地改变同一班级的班级名称？Dynamicaly通过添加数字改变同一班级的班级名称

<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/但什么是错的...

来源

2017-08-01 Dominik Svoboda

我认为这可能是有关您的代码添加到您的问题 –

哪些错误你的小提琴？仅仅因为显示的文本说了一件事，并不意味着类是相同的 – Derek

我不认为你应该为你的类添加索引后缀，最好为索引添加一个单独的属性，比如'data- index ='1''等 –

我不喜欢可怕的jQuery的，所以我创建了一个香草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代码。

这里有一个更新的小提琴：https://jsfiddle.net/7cLoxn29/5/

来源

2017-08-01 23:35:00 Svenskunganka

谢谢，但不幸的是它并不总是关于长笛。我需要这个功能对所有仪器都是通用的。 –

我明白了，那么我会修改我的答案。给我几分钟！ :) – Svenskunganka

@DominikSvoboda在那里，我已经更新了应该按预期工作的答案。结束了相当的循环。如果你需要比这更高级的版本，我认为是时候开始研究正则表达式。我还添加了一个链接到你可以用来检查它是否按预期工作的小提琴。 – Svenskunganka

Dynamicaly通过添加数字改变同一班级的班级名称

回答

相关问题