jquery - ループによる jQuery の効率 - for または each()

Question

Bootstrapモーダルで起動できる複数のVimeoビデオを含むクライアントサイトのセクションがあるため、モーダルが起動されたときにビデオを自動的に再生し、モーダルが閉じられたときに一時停止するために必要なjQueryに取り組んでいます。

次のコードは機能しますが、あまり効率的ではなく、 for ループを機能させようとしてもうまくいきませんでした。ここで誰かが「釣り方を教えて」くれたら、将来はもっと効率的になるだろう。

var idPlayer0 = new Vimeo.Player('player_0');

jQuery('#modal-0').on('shown.bs.modal', function (e) {
    idPlayer0.play();
});
jQuery('#modal-0').on('hidden.bs.modal', function (e) {
    idPlayer0.pause();
});

// And do it again...

var idPlayer1 = new Vimeo.Player('player_1');

jQuery('#modal-1').on('shown.bs.modal', function (e) {
    idPlayer1.play();
});
jQuery('#modal-1').on('hidden.bs.modal', function (e) {
    idPlayer1.pause();
});

// And so on...

私は無駄に以下を試しました...

// get total number of iframes on page
var iframes = document.getElementsByTagName('iframe');

var idPlayer = [];
for (var i = 0; i <= iframes; i++) {
    idPlayer[i] = new Vimeo.Player('player_' + i);

    jQuery('#modal-' + i).on('shown.bs.modal', function (e) {
        idPlayer[i].play();
    });
    jQuery('#modal-' + i).on('hidden.bs.modal', function (e) {
        idPlayer[i].pause();
    });
}

どんな助けでも大歓迎です。ありがとう！

編集

@ryan とループ内の JavaScript クロージャーの助けを借りて、以下を使用してこれを機能させました - シンプルな実用的な例。これは最も堅牢なソリューションではありませんが、近づいています。

jQuery( ドキュメント ).ready(function() {

// get total number of iframes on page
var iframes = document.getElementsByTagName('iframe').length;

var idPlayer = [];

for (let i = 0; i < iframes; i++) {

    idPlayer[i] = new Vimeo.Player(document.getElementById("player_"+[i]));

    jQuery('#modal-' + i).on('shown.bs.modal', function (e) {
        idPlayer[i].play();
    });
    jQuery('#modal-' + i).on('hidden.bs.modal', function (e) {
        idPlayer[i].pause();
    });
}

});