jQueryスライダのインデックス

Question

は、.bx-pager divのアンカータグに.slider-item divの<h1>タグ内のテキストを複製しようとしています。たとえば、最初の.bx-pager-itemのアンカーは、最初の.slider-item divのh1のテキストを持つ必要があります。次に、2番目の.bx-pager-itemのアンカータグは、2番目の.slider-item divに<h1>のテキストを含める必要があります。 jQueryコードに何か問題があり、それが私の望んでいないものになっていますか？

私のjQueryコード：

$(window).load(function(){ 
    $("#pagination .bx-pager-item").each(function(){ 
    var whichPos = $(this).index(); 
    var whichSlide = $('.slider-item').index(whichPos).find('h1').text(); 
    $(this).find('a').text(whichSlide); 
    }); 
}); 

ページネーション：

<div id="pagination"> 
    <div class="bx-pager-item"><a href="#"></a></div> 
    <div class="bx-pager-item"><a href="#"></a></div> 
    <div class="bx-pager-item"><a href="#"></a></div> 
</div> 

スライダ構造は次のとおりです。

<div class="bxslider"> 
    <div class="slider-item"> 
    <h1>Header</h1> 
    </div> 
    <div class="slider-item"> 
    <h1>Header 2</h1> 
    </div> 
    <div class="slider-item"> 
    <h1>Header 3</h1> 
    </div> 
</div> 

Answer 1

変更：

var whichSlide = $('.slider-item').index(whichPos).find('h1').text(); 

に：

var whichSlide = $('.slider-item').eq(whichPos).find('h1').text(); 

indexは、n番目の要素を取得していない、それは数を返します。

CodePen：http://codepen.io/theblindprophet/pen/JKLbXw