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通過添加數字改變同一班級的班級名稱

回答

相關問題