classe séparée pour chaque enfant

Question

Je suis coincé sur quelque chose, j'espère que vous pourriez être en mesure de m'aider. J'utilise un plugin pour un curseur sur WordPress et j'ai besoin de contrôler chaque vignette. Je veux ajouter un identifiant unique à chaque élément enfant dans une div afin de pouvoir le styliser en utilisant CSS.

Voici ce que le code ressemble:

<div class="royalControlNavCenterer"> 
    <a class="current" href="#">1</a> 
    <a href="#">2</a> 
    <a href="#">3</a> 
    <a href="#">4</a> 
    <a href="#">5</a> 
</div> 

Comme vous pouvez le voir une classe en cours est déjà ajouté par le plug-in. Ce que je suis à la recherche est de même, ajouter dynamiquement une classe à chaque élément de sorte qu'il regarderait comme suit:

<div class="royalControlNavCenterer"> 
    <a id="1" class="current" href="#">1</a> 
    <a id="2" href="#">2</a> 
    <a id="3" href="#">3</a> 
    <a id="4" href="#">4</a> 
    <a id="5" href="#">5</a> 
</div> 

De cette façon, je peux le style chaque vignette séparément, ce qui est nécessaire pour ma conception. Je pensais que jQuery serait la meilleure option pour cela, mais je suis ouvert à toutes les suggestions.

Toute aide est grandement appréciée!

Answer 1

Cela devrait fonctionner ... Il va cibler directement les a enfants de royalControlNavCenterer et leur attribuer un attribut id commençant à 1 et montant à partir de là.

$(".royalControlNavCenterer > a").each(function(i) { 
    $(this).attr("id", i+1); 
}); 

Answer 2

$(".royalControlNavCenterer > a").prop("id", function(i) { 
    return i + 1; 
}); 

---

Si l'indexation base 0 est ok, IE:

<div class="royalControlNavCenterer"> 
    <a class="current" href="#" id="0">1</a> 
    <a href="#" id="1">2</a> 
    <a href="#" id="2">3</a> 
    <a href="#" id="3">4</a> 
    <a href="#" id="4">5</a> 
</div> 

Vous pouvez sortir avec

$(".royalControlNavCenterer > a").prop("id",​ Number);​ 

Answer 3

Vous pouvez le faire en ajoutant ceci à la fin de votre body:

<script type="text/javascript"> 
$(window).load(function(){ 
    var globalCount = 0; 
    $('.royalControlNavCenterer a').each(function(){ 
     this.id='id_'+(globalCount++); 
    }); 
}); 
</script> 

Mais je ne suis pas sûr que je vois l'intérêt de donner des identifiants dynamiques. Vous n'avez pas besoin de faire cela pour donner des styles séparés.

Démonstration: http://jsfiddle.net/dystroy/LrBxc/ (type F12 pour afficher la console)

Il semble que je suis le seul pris la peine par le fait que les ids proposées ne suivaient pas la HTML 4 standard:

ID et NOM les jetons doivent commencer par une lettre ([A-Za-z]) et peuvent être suivi d'un nombre quelconque de lettres, chiffres ([0-9]), tirets ("-"), traits de soulignement ("_"), deux points (":") et des points (".").