Renvoie le numéro nth-child puis l'ajoute à ce lien en tant qu'attribut de données

Question

J'essaie d'utiliser jQuery pour renvoyer la relation des éléments de navigation enfant à son frère, puis j'ajoute un attribut de données à chaque frère avec le nombre qui représente leur commande. Donc s'il y a des frères et sœurs, le troisième frère a un lien de données = "3".

L'ordre des liens de nav est déterminé par l'utilisateur dans un CMS.

Ma structure actuelle HTML est:

<nav> 
    <a class="season-nav-link" href="#">1</a> 
    <a class="season-nav-link" href="#">2</a> 
    <a class="season-nav-link" href="#">3</a> 
    <a class="season-nav-link" href="#">4</a> 
</nav> 

Et mon JS est:

$(function(){ 
    var ordernum = ($("nav.season-slider-nav a").index()+1); 
    var orderlink = $("a.season-nav-link"); 
    $(orderlink).attr('data-info', ordernum); 
}); 

actuellement revient avec l'attribut de données dans chaque lien, mais la valeur de chacun est "1" .

Answer 1

cela arrive parce que vous n'utilisez que le premier élément du résultat de votre premier sélecteur. Vous souhaitez probablement parcourir tous les frères et sœurs et remplir une liste de valeurs.

puis itérer sur les résultats du deuxième sélecteur et remplir en conséquence

pseudo exemple:

$(function(){ 
    var ordernum = []; 
    $("nav.season-slider-nav a").each(function(index, element){ 
     ordernum.push(index+1); 
    }); 
    $("a.season-nav-link").each(function(index, element){ 
     $(element).attr('data-info', ordernum[index]); 
    }); 
    }); 

Answer 2

Pls utiliser chaque 'pour accéder à chaque élément, étant donné que l'indice peut être obtenu à partir de chaque' lui-même, vous peut juste écrire:

$(function(){ 
    $("nav a").each(function(index, elem) { 
    $(elem).attr('data-info', index + 1); 
    }); 
});