$('input[value="aaa"]') は「"aaa"と入力されたinput要素」ではない

Last updated at 2020-08-11Posted at 2020-08-10

かなり驚いたので初めて記事を書きます。

だめな例

"aaa"と入力されたinput要素のvalue属性を表示するプログラムのつもり。(つまり"aaa"が返ってくるはず)

HTML

<input type="text" name="phrase">

JavaScript

const check = () =>{
   const target = $('input[value="aaa"]');
   console.log(target.val());
}

"aaa"と入力して、consoleでcheck();を呼び出すと当然"aaa"...ではなくundefined

どうやらこちらによると、

If you are changing value dynamically it wouldn't get selected by attribute selector.

この属性セレクタはユーザーによって動的に変更された値に対しては使えないそうです。¹

Attribute selector will not check the dom node's value property it only targets the element's attribute

この属性セレクタは、その要素の属性のみを対象とし、ノードのvalueプロパティはチェックされません。¹

filterを使いましょう。²

HTML

<input type="text" name="phrase">

JavaScript

const check = () =>{
   const target = $('input').filter(function() {
       return this.value == "aaa"
   });
   console.log(target.val());
}

"aaa"と入力して、consoleでcheck();を呼び出すと..."aaa"！！

もちろん、元からinputにvalue="aaa"と指定されているものをセレクタで見つける際には使えます。また、ブラウザのデバッグツールを使って後から属性を追加した場合も同様。ポイントは動的かどうかというより属性として与えられているかどうかみたいですね。 ↩ ↩²
ここでアロー関数で書こうとするとコケます。詳しくは"js アロー関数 this"。 ↩