web-dev-qa-db-ja.com

jQueryの動的オブジェクトで.eachを使用していますか？

これを尋ねているように思われる質問がたくさんありますが、最終的には彼らが望むのは.eachではなく.clickイベントを添付することですので、それらのすべてで一般的に受け入れられている答えには$("body").on("click", ".selector", function(){});が含まれ、これは絶対に私が欲しいものではありません。

生成された入力がいくつかあり、それぞれの値を同時に変更する必要があります。通常、私は$(".inputs").each(function(){$(this).val("new-value")};またはそれらの線に沿った何かをしますが、動的な側面のためにできません。

では、どのようにして$("body").on("each", ".inputs", function(){});を実行しますか？

javascriptjquerydynamicdynamically-generatedeach
32
o_O

実際、setTimout内で.eachを実行するのと同じくらい簡単です。

setTimeout(function(){
  $(".inputs").each(function(){$(this).val("new-value")});
}, 5000);
5
o_O

$.eachは、追加された新しい要素で機能します。

http://jsfiddle.net/4SV7n/

毎回異なることをする：

http://jsfiddle.net/4SV7n/1/

3
Samuel Reid

動的要素では$(".inputs").each(function(){$(this).val("new-value")};を完全に使用できます。要素を動的に追加した後、スクリプトを再実行するだけです。

コメントから、「それぞれ」について誤解があると考えました。 「各」はイベントではないため、「各」が呼び出されてもイベントは発生しません。追加された要素を追加するタイミングを制御できないため、追加された要素を追跡したい場合は、タイマーが必要です。

setInterval(function(){ $(".inputs").each(function(){$(this).val("new-value")}; },500);
3
T.S.

OPが要求したとおりのことを行う、はるかに優れたスクリプトを次に示します。

function doWithInput(i, e){
        $(e).val("done with each");
}

$(document).ready(function(){
    $("#button").click(function(){
       $("#inputs").append("<input class='inputs_new' type='text' /><br />");
    });
        $(".inputs").each(doWithInput);
});

$(document).on("DOMNodeInserted", ".inputs_new", function(e) {
        $(e.target).removeClass('inputs_new').addClass('inputs');
  doWithInput(0, e.target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputs">
    <input class="inputs" type="text" placeholder='type in me' /><br />
</div>
<button type="button" id="button">Add</button>
2
Tarmo Saluste