nth-child番号を返し、それをデータ属性としてそのリンクに追加します

Question

jQueryを使用して子ナビゲーション要素の関係を兄弟に戻し、各兄弟にデータ属性を表す数値を追加しようとしていますその順序。

兄弟用の場合、3番目の兄弟はdata-link = "3"です。

ナビゲーションリンクの順序は、CMSのユーザーによって決定されます。

私の現在のHTML構造は次のとおりです。

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

そして、私のJSがある：

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

は、現在、各リンクでのデータ属性を持つリターンですが、一つ一つの値が「1」であります。

Answer 1

これは、最初のセレクタの結果の最初の要素のみを使用しているために発生します。

おそらく、すべての兄弟を繰り返し処理し、値のリストを入力する必要があります。次いで

第2の選択結果を反復処理し、それに応じて

擬似例埋める：インデックス「はそれぞれ」から得ることができるので、それ自体を各要素にアクセスする

$(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利用「はそれぞれ」を、あなたがちょうど書くことができます：

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