Jqueryのセレクタで変数を使用する場合

Question

Jqueryでセレクタで変数を使用する場合、+演算子で問題ないとの記事を見つけたのですが、
うまく利用することができません。
また、logにも特にエラーが出力されないのですが、どの点に問題があるのか、お力添えをお願い申し上げます。

変数を使用せずに作動するケース⬇︎
 $('#kozo').on('DOMSubtreeModified propertychange', function() {
     $('#kozo > div:eq(0)').attr('id','kozo_div');
   });

変数をセレクタに使用してうまく作動しない⬇︎
$(document).ready(function() {
  var add_div=['kozo','chikunensu','sokosu','sokaisu','shozaikaisu'];
  for (var i = 0; i < add_div.length; i++) {
    $(`#${add_div[i]}`).on('DOMSubtreeModified propertychange', function() {
    $(`#${add_div[i]}> div:eq(0)`).attr('id',`#${add_div[i]}_div`);
    });
  }
});

Comments

[kei344]

コードが切れています。再現可能な形に直されることをお勧めします。

[SugiuraY]

ご指摘ありがとうございます。再現可能なコードに修正をいたしました。

Answer 1

onの中身はイベントが起きてから実行されるので、その時点でiはループを抜けきった後の値になっています。なので、何らかの対応が必要です。

// onの中身だけ
$('#'+add_div[i]).on('DOMSubtreeModified propertychange', function() {
    $(this).children('div').eq(0).attr('id',add_div[i]+'div');
});

Comments

[SugiuraY]

コメントをいただき、ありがとうございます。
先にiがループしてしまった、onの中身の処理はそのあとに実行されてしまうと言う整理ですね。DOMSubtreeModified propertychange（要素の変更の監視）がonを使用せざる得ないため、ここを変更することができず、「jquery on for　ループ」等で検索しても良いものが出てこないのですが、何か検索等のヒントがあればアドバイスをいただくことはできますでしょうか。
たびたび恐縮ですが、よろしくお願い申し上げます。

[maisumakun]

onでの登録はその場で行われるので、iを利用しても問題ありません。中身だけ工夫すれば回避できます。

[SugiuraY]

コメントありがとうございます。
理解することができましたと嘘をつくことができず、どうしても何が起きているのかがわからずに、現状八方調べている状況す。
('selector').on.(
$('#'+add_div[i]).on('DOMSubtreeModified propertychange', function() {
$(this).children('div').eq(0).attr('id',add_div[i]+'div');
});
)
という意味で”中身”と仰って頂いているのでしょうか。正直に申し上げますと、中身がどの部分をさしていらっしゃっていて、当初の提示させていただいたコードの中身のどこの部分が問題があって、iのループが抜けてしまっているのかが理解することができません。。

もちろん、私のわがままに付き合っていただき、ご回答に時間を割いて頂いているのは承知の上ですが、許されるのであれば、最後にお尋ねさせてください。
よろしくお願い申し上げます。

[defghi1977]

「イベントリスナ ループ」で検索してみると良いよ. この問題はJavaScriptの有名な落とし穴の一つ.

[SugiuraY]

ズバリという記事がたくさん出てきました！私もまんまと落とし穴に嵌ってしまったのですね。。
先人たちがたくさん、残してくださっていて勉強になります。
本当にお力添えに感謝を申し上げます。
よろしくお願いいたいます。

Answer 2

とりあえず置き換えてみました。

  var add_div=['kozo','chikunensu','sokosu','sokaisu','shozaikaisu'];
  $.each( add_div, function( i, val ){
    $( '#' + val ).on( 'DOMSubtreeModified propertychange', function() {
      $( '#' + val + '> div:eq(0)').attr( 'id','#' + val );
    } );
  }

【jQueryのeach()メソッドの基本的な使い方 | UX MILK】
http://uxmilk.jp/45120

【【jQuery】複数の要素に対して繰り返し処理をする（each・for） - TASK NOTES】
http://www.task-notes.com/entry/20140725/1406216933

【jQuery.each() | jQuery API Documentation】
http://api.jquery.com/jquery.each/

Comments

[SugiuraY]

コメントをいただきありがとうございます。
ご提示のコードで実現することができました。
eachメソッドで処理させれば、for文で使用するような、変数の問題が生じない点は興味深いところです。
構造文としてのforとメソッドとしてのeachのどのような違いでこのような相違が生じるのか、その理由を勉強してみようと思います。

[kei344]

ヒント：スコープ
と書こうとして「'#' + add_div」を「'#' + val 」におき直していないことに気づいた。修正します。

[SugiuraY]

ご丁寧に修正をいただき、ありがとうございます。
よろしくお願い申し上げます。

Answer 3

カウンタの宣言をvarからletに変えたら如何でしょう?

$(document).ready(function() {
  var add_div=['kozo','chikunensu','sokosu','sokaisu','shozaikaisu'];
  for (let i = 0; i < add_div.length; i++) {
    $(`#${add_div[i]}`).on('DOMSubtreeModified propertychange', function() {
    $(`#${add_div[i]}> div:eq(0)`).attr('id',`#${add_div[i]}_div`);
    });
  }
});

NOTE:
mutation eventsは現在非推奨なので, 代わりにMutationObserverの利用も検討して下さい.

Comments

[SugiuraY]

コメントありがとうございます。
ご呈示のコードで、処理を実行することは実現しました。

また、letを使うとブロックスコープ化することができることを調べることができました。
ヒントのようなものを見つけることができたのですが
https://ginpen.com/2017/12/02/var-let-const/
このように、on以下が実行される前にループが終了してiは最後の変数値を代入してしまうため、イメージしているようなi=0 ⇨処理実行　i=1⇨処理実行という処理の流れになっていないということなのでしょうか。
一方letを変数宣言に利用することで、ブロックスコープ化することで、そのループ内でのみ変数が固定されて使用されるため、結果的に実行する処理と対応する変数が一致しているというイメージなのでしょうか。
よろしくお願い申し上げます。

[defghi1977]

その認識で合っています.

「functionの実行時にどのiを探しに行くのか？」が問題の本質です.

for(var i ...){}でカウンタを定義すると「変数定義の巻き上げ」により, i はfor文の外でも有効となります.
この状態で非同期にリスナ関数function(){i}が呼び出されると, このfor文の外のi(のループ完了後の値)を参照することとなます.

for(let i ...){}でカウンタを定義すると, ループ毎にブロックスコープが生成され, その都度変数iが(カウントアップしつつ)作られます. この状態で非同期的にリスナ関数function(){i}が呼び出されると, ループ毎に異なる変数iを参照することとなります.

[SugiuraY]

最後まで、お付き合いをいただき、ありがとうございます。
殆ど、問題の核心に迫ることができました。あとは自分で調べてサンプルコードを書いてみながら、十分に理解することができそうです。
defghi1977様を初め、皆様のご協力に改めて深謝を申し上げます。
よろしくお願いいたします。