jqueryですべての要素を読み込む方法

Question

いいえ。私は別のspanを持っていて、そのid属性をY-m-d形式の日付に設定しています。私は各スパンのカウントダウンを計算するためにカウントダウンjsを使用していますが、私の関数は1つの日付を選択し、それにカウントダウンを適用します。他の日付のカウントダウンは評価されません。

<span class="timer" id="2017-10-1"></span> 
<span class="timer" id="2017-10-2"></span> 
<span class="timer" id="2017-10-3"></span> 
<span class="timer" id="2017-10-4"></span> 

これはカウントダウンjqueryの

http://hilios.github.io/jQuery.countdown/

と私は関数の中で書いています。

$(document).ready(function() { 
    var time = $(".timer").attr('id'); 
    var timeLeft = time.split('-').reverse().join('-'); 
    $(".timer").countdown(timeLeft, function (event) { 
     $(this).text(event.strftime("%D days %H hours %M minutes %S seconds remaining")); 
    }); 
}); 

Answer 1

.attr('key')従ってtimeLeftが最初の要素に基づいて計算される最初の要素の値を取得します。

.each()を使用して$(".timer")オブジェクトを繰り返し、要素に個別にプラグインcountdown()を適用します。

私は.each使用することです何が必要だと思う

$(document).ready(function(){ 
    $(".timer").each(function(){ 
     var time = this.id; 
     var timeLeft = time.split('-').reverse().join('-'); 
     $(this).countdown(timeLeft, function(event){ 
      $(this).text(event.strftime("%D days %H hours %M minutes %S seconds remaining")); 
     }); 
    }) 
}); 

Answer 2

：https://api.jquery.com/each/

それは次のようになります。

 $(document).ready(function(){ 
      var time; 
      var timeLeft; 

      $(".timer").each(function(index) { 
       var time = $(".timer").attr('id'); 
       var timeLeft = time.split('-').reverse().join('-'); 
       $(this).countdown(timeLeft, function(event) { 
        $(this).text(event.strftime("%D days %H hours %M minutes %S seconds remaining")); 
       }); 
      }); 

     }); 

あなたは同じで、すべての要素を反復処理する必要があるためです.each（）を使って簡単にこれを達成することができます。

希望すると助かります！

Answer 3

その要素のプラグインオプションに要素固有のデータを適用する必要があるときはいつでも、eachループ内の特定の要素インスタンスを分離できるように、コレクションを繰り返します。その要素固有のデータを取得し、個々の要素のプラグイン初期化オプションに渡します。

$(".timer").each(function() 
    // "this" is specific element instance 
    var time = this.id; 
    var timeLeft = time.split('-').reverse().join('-'); 
     $(this).countdown(timeLeft, function(event)    { 
      $(this).text(event.strftime("%D days %H hours %M minutes %S seconds remaining")); 
     }); 
});