それぞれに対して非反復数（値）を生成する<a>タグ

Question

タグのグループの範囲（0,9）から非繰り返しのランダムな数値セットを生成するフォームを作成しようとしています。私は私のjavascriptを書いたが、私はまだ何か正しいものを得ていない。配列のすべてのブラウザをリフレッシュした後、しかし、アレイ全体ではなく、非されている各ボタンの間で特異値を含むhrefボタンで再スケジュールされている私は何を取得しています

(function($) { 
 
    $(window).load(function() { 
 
     function shuffle(array) { 
 
      var i = array.length, 
 
       j = 0, 
 
       temp; 
 

 
      while (i--) { 
 
       j = Math.floor(Math.random() * (i+1)); 
 
       temp = array[i]; 
 
       array[i] = array[j]; 
 
       array[j] = temp; 
 
      } 
 
      return array; 
 
     } 
 

 
     var ranNum = shuffle([0,1,2,3,4,5,6,7,8,9]); 
 
     $('.test').each(function(){ 
 

 
      $(this).html(ranNum); 
 
     }); 
 
    }) 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div class="jumbotron"> 
 
    <div class="form-group"> 
 
     <div class="btn-group"> 
 
      <a href="#" class="btn btn-default test" id="1st">1</a> 
 
      <a href="#" class="btn btn-default test" id="2nd">2</a> 
 
      <a href="#" class="btn btn-default test" id="3rd">3</a> 
 
      <a href="#" class="btn btn-default test" id="4th">4</a> 
 
      <a href="#" class="btn btn-default test" id="5th">5</a> 
 
      <a href="#" class="btn btn-clear">Back</a> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="btn-group"> 
 
      <a href="#" class="btn btn-default" id="6th">1</a> 
 
      <a href="#" class="btn btn-default" id="7th">2</a> 
 
      <a href="#" class="btn btn-default" id="8th">3</a> 
 
      <a href="#" class="btn btn-default" id="9th">4</a> 
 
      <a href="#" class="btn btn-default" id="10th">5</a> 
 
      <a href="#" class="btn btn-clear">Clear</a> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="exampleInputEmail1" class="text-success"> 
 
      <h5 class="text-success">PayCom PIN</h5> 
 
     </label> 
 
     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="PIN Number Here"> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <a href="#" class="btn btn-clear">Previous</a> 
 
     <a href="#" class="btn btn-success">Buy Airtime</a> 
 
    </div> 
 
</div>

繰り返す。

どうすれば解決できますか？

Answer 1

あなたはindex

$('.test').each(function (index, element) { 
    $(element).html(ranNum[index]); 
}); 

ranNumを追加する必要がありますが、あなたの配列である、あなたは、ループの各HTML要素と各配列要素必要があります。

してください、ドキュメントを読んで：https://api.jquery.com/each/

Answer 2

それを行うためのクリーンな方法は、「プール」、あなたは番号を「取る」は、それぞれの時間のような数字のあなたの配列を持っているかもしれないが、それはプールから削除されます。プールから番号を削除するには、array.splice()を使用します。

var arrayOfAvailableNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 
 

 
function getNumberAtRandom() { 
 
    var pos = Math.floor(Math.random() * arrayOfAvailableNumbers.length); 
 
    var item = arrayOfAvailableNumbers.splice(pos, 1); 
 
    return item[0]; 
 
} 
 

 
$('.item').each(function() { 
 
    $(this).html(getNumberAtRandom()); 
 
});

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

 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div>