ノウハウ

jQueryでfor文処理の為に属性値に変数を使いたい場合どうする?

投稿日: / 更新日:

プログラミングをしていると連番処理というものはよく使うものです。例えば上図のようなものです。

上図の例では html のフォームで同じようなボタンがあり、その名前に連番を付けています。そのボタン1つ1つに処理を書けば良いのですが、同じような処理であれば1発でやった方がスマートです。

プログラミングで繰り返し処理と言えば for 文です。大抵のプログラミング言語にあります。今回もこの繰り返し処理をやろうとしたのですが jquery では初めてだったので泥沼にはまりました。これだけで半日は潰れてしまいました。

phpの場合

まずは php の場合を見てみましょう。こちらは簡単です。

for($i = 1; $i <= 4 ; i++){
   if($_POST['bt'.$i]) == 0){

   }
}

php ではピリオドが文字列を連結させる役目を持ちます。なので name 属性名にピリオドで for 文の繰り返し変数を結合しています。これで全てのボタンに対して処理を書かなくても一発で済みます。

jqueryの場合

単純な事なのですが、jquery の場合かなり難しくて他のプログラミング言語の常識では通用しませんでした。

for(var i = 1; i <= 4; i++){
   if($(`input[name='bt${i}']`).val() == 0){

   }
}

色々と小難しい記述なのですが、まず属性値に変数を使うには変数を{}で囲わなくてはいけません。通常は()ですが{}でないといけません。{}で囲むと文字列ではなく数式として認識されるようです。

そして全体をグレイブアクセント「`」で囲わなくてはいけません。他のプログラミング言語でも使い慣れているダブルクォーテーションやシングルクォーテーションでは動きません。他のプログラミング言語で使ったことがないのでドツボにはまっていました。

jQuery で属性名に変数を使う方法について覚書に書きました。参考になれば幸いです。

追記(IEに対応)

バッククォートを使うテンプレートリテラルは IE11 に対応していませんので name 属性は使わずおとなしく ID で割り振りました。

for(var i = 1; i <= 4; i++){
   if($('#bt'+i).val() == 0){

   }
}

これなら簡単に ID 名と変数をプラスで結合できます。

-ノウハウ

Copyright© ウェブミスト(Webmist) , 2020 AllRights Reserved Powered by STINGER.