親 'li'のスパンコンテンツインデックス番号を指定していますか？

Question

したがって、jqueryを使用して動的にコンテンツをスパンに追加しようとしています。スパンは順序付けられていないリストの中にあります。私はそれが次のようになりますので、スパンに各リチウムのインデックス番号を追加したい：

• プロバイダ1

• プロバイダ2

• プロバイダ3

この問題をどうすれば解決できますか

が、現在、それはこの

• プロバイダ1

• プロバイダ1

• プロバイダ1

jQuery(document).ready(function() { 
 

 

 
\t var timesClickedIndex = $('.timesClicked').closest("li").index() + 1; 
 
\t $('.timesClicked').html('Providor '+timesClickedIndex); 
 
    
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li> 
 

 
<div> 
 
<span class="timesClicked"></span> 
 
</div> 
 

 
</li> 
 
<li> 
 

 
<div> 
 
<span class="timesClicked"></span> 
 
</div> 
 

 
</li> 
 
<li> 
 

 
<div> 
 
<span class="timesClicked"></span> 
 
</div> 
 

 
</li> 
 
</ul>

をやっています

Answer 1

次のものを使用できます（インデックスはjquery each()になります）。

jQuery(document).ready(function() { 
 
\t $('.timesClicked').each(function(i,e) { $(e).html('Providor '+ (i+1)); }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li> 
 
<div> 
 
<span class="timesClicked"></span> 
 
</div> 
 
</li> 
 
<li> 
 
<div> 
 
<span class="timesClicked"></span> 
 
</div> 
 
</li> 
 
<li> 
 
<div> 
 
<span class="timesClicked"></span> 
 
</div> 
 
</li> 
 
</ul>

インデックス（）あなたはそれが常に1が得られます使用していて、単純にすべての要素にその単一の値を適用しているようので、あなたのコードが動作しない理由があります。あなたがこれを行うには、各jqueryの機能を使用することができます

jQuery(document).ready(function() { 
 
    $('.timesClicked').each(function(i,e) { 
 
    $(e).html('Providor '+ ($('.timesClicked').index(e) + 1)); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li> 
 
<div> 
 
<span class="timesClicked"></span> 
 
</div> 
 
</li> 
 
<li> 
 
<div> 
 
<span class="timesClicked"></span> 
 
</div> 
 
</li> 
 
<li> 
 
<div> 
 
<span class="timesClicked"></span> 
 
</div> 
 
</li> 
 
</ul>

Answer 2

：その後は上記の例を次の例のようにインデックスを（）を使用することもできますが、コードがあまりにも複雑です。あなたはスパンをループ.each()を使用することができます https://api.jquery.com/each/

jQuery(document).ready(function() { 
 

 

 
\t var timesClickedIndex = $('.timesClicked').each(function(index) 
 
     { 
 
      $(this).html('Providor ' + (index + 1)); 
 
     });  
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li> 
 

 
<div> 
 
<span class="timesClicked"></span> 
 
</div> 
 

 
</li> 
 
<li> 
 

 
<div> 
 
<span class="timesClicked"></span> 
 
</div> 
 

 
</li> 
 
<li> 
 

 
<div> 
 
<span class="timesClicked"></span> 
 
</div> 
 

 
</li> 
 
</ul>

Answer 3

とでそれらに番号をインデックス引数を使用します。

jQuery(document).ready(function() { 
 
    $('.timesClicked').each(function(i) { 
 
    $(this).html('Providor ' + (i+1)); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 

 
    <div> 
 
     <span class="timesClicked"></span> 
 
    </div> 
 

 
    </li> 
 
    <li> 
 

 
    <div> 
 
     <span class="timesClicked"></span> 
 
    </div> 
 

 
    </li> 
 
    <li> 
 

 
    <div> 
 
     <span class="timesClicked"></span> 
 
    </div> 
 

 
    </li> 
 
</ul>

Answer 4

jQuery(document).ready(function() { 
 
    $('.timesClicked').each(function(key){ 
 
    $(this).html('Providor '+ (key+1)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li> 
 
    <div> 
 
    <span class="timesClicked"></span> 
 
    </div> 
 
</li> 
 
<li> 
 
    <div> 
 
    <span class="timesClicked"></span> 
 
    </div> 
 
</li> 
 
<li> 
 
    <div> 
 
    <span class="timesClicked"></span> 
 
    </div> 
 
</li> 
 
</ul>