javascript - jQuery セレクターの要素 ID を動的に構築するにはどうすればよいですか?

Question

ループを使用してこのコードを削減したいと思います。どうやってやるの？

$("#whiteJenisPembayaran1").live('focus', function() {
    $("#whiteJenisPembayaran1").typeahead(typeaheadConfig);
});
$("#whiteJenisPembayaran2").live('focus', function() {   
    $("#whiteJenisPembayaran2").typeahead(typeaheadConfig);
});
$("#whiteJenisPembayaran3").live('focus', function() {
    $("#whiteJenisPembayaran3").typeahead(typeaheadConfig);
});

Answer 1

HTMLを変更できますか？はいの場合、これらの要素にクラス属性を設定するのが最善の方法です。
そうすれば、これを行うことができます：

HTML:

<div class="whiteJenisPembayaran" id="whiteJenisPembayaran1"></div>
<div class="whiteJenisPembayaran" id="whiteJenisPembayaran2"></div>
<div class="whiteJenisPembayaran" id="whiteJenisPembayaran3"></div>
<div class="whiteJenisPembayaran" id="whiteJenisPembayaran4"></div>

Javascript:

$(".whiteJenisPembayaran").live('focus', function() {
    $(this).typeahead(typeaheadConfig);
});

Answer 2

文字列で始まる ID を持つすべてを選択する属性セレクター [id^=string] を使用できます。

$("[id^=whiteJenisPembayaran]").live('focus', function() {
    $(this).typeahead(typeaheadConfig);
});

Answer 3

$("#whiteJenisPembayaran1, #whiteJenisPembayaran2, #whiteJenisPembayaran3").live('focus', function() {
    $(this).typeahead(typeaheadConfig);
});

または最近の「正しい」方法：

$(document).on('focus', '#whiteJenisPembayaran1, #whiteJenisPembayaran2, #whiteJenisPembayaran3', function() {
    $(this).typeahead(typeaheadConfig);
});

Answer 4

function bindListener(index) {
    var key = '#whiteJenisPembayaran' + index;
    $(key).live('focus', function() {
        $(key).typeahead(typeaheadConfig);
    });
}

var n = 5; // your max
for (var i = 1; i <= n; ++i) {
    bindListener(index);
}

ループ内でイベントをバインドする際のクロージャーの問題を防ぐために、この方法を実行します。

Answer 5

次のようなすべての ID の配列を持つことができます。

ids = [ '#whiteJenisPembayaran1', '#whiteJenisPembayaran2', '#whiteJenisPembayaran3' ];

for (i = 0; i < ids.length; i++) {
    $(ids[i]).live('focus', function() {
        $(ids[i]).typeahead(typeaheadConfig);
    });
}