Dynamicaly changer le nom de classe de la même classe en ajoutant le numéro

Un dernier problème ... comment changer dynamiquement le nom de la classe des mêmes instruments en ajoutant un numéro?Dynamicaly changer le nom de classe de la même classe en ajoutant le numéro

<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>

à cela? ...

<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>

J'ai ce code https://jsfiddle.net/7cLoxn29/1/ mais quelque chose cloche ...

Source

2017-08-01 Dominik Svoboda

Je pense qu'il pourrait être utile d'ajouter votre code à votre question –

Quel est le problème avec votre violon? Juste parce que le texte affiché dit une chose, ne veut pas dire que la classe est la même – Derek

Je ne pense pas que vous devriez ajouter des suffixes d'index à vos classes, il vaudrait mieux ajouter une propriété séparée pour l'index quelque chose comme 'data- index = '1'' et ainsi de suite –

Je ne suis pas terriblement friands de jQuery, donc je créé une vanille Solution JS pour vous (j'espère que c'est OK!):

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}` 
     }) 
    } 
    } 
})

Notez qu'il s'agit du code JS ES2015.

Voici un violon mis à jour: https://jsfiddle.net/7cLoxn29/5/

Source

2017-08-01 23:35:00 Svenskunganka

Merci, mais malheureusement ce n'est pas toujours à propos de Flûte. J'ai besoin que cette fonction soit universelle pour tous les instruments. –

Je vois, je vais réviser ma réponse alors. Donne moi quelques minutes! :) – Svenskunganka

@DominikSvoboda Là, j'ai mis à jour la réponse qui devrait fonctionner comme prévu. Fini par être tout à fait la boucle. Si vous avez besoin d'une version plus avancée que celle-ci, je pense qu'il est temps de commencer à regarder dans regex. J'ai également ajouté un lien vers un violon avec lequel vous pouvez travailler pour vérifier si cela fonctionne comme prévu. – Svenskunganka

Dynamicaly changer le nom de classe de la même classe en ajoutant le numéro

Répondre

Questions connexes