jQueryのセレクタを使用しtextの入力内容でフィルタを掛けlengthを取得したい。

###前提・実現したいこと
jQueryのセレクタでtextのvalueのlengthを取得したい。

###発生している問題について

jquery-1.11.2.min.jsを使用しています。

以下のコードでtextのvalueが"hogehoge"の物の個数を取得したいのですが、
どうしてもページ読み込み時の個数しか返してくれません。(以下のコードで言うとlength=2)
どの様に記述すればtext変更後の個数を返却してくれるでしょうか？

<!DOCTYPE>
<html>
    <head>
        <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    </head>
    <script>
$(function(){
    $("[name^=hogetext]").on("blur",function(){
		if ($('[name^=hogetext]:text[value="hogehoge"]').length <= 1 ) {
       //hogehogeを0個にしてもここには入ってこない。。
	    	alert("hogehogeは最低1つ以上必要です。");
	    	return;
	    }
    });    
});    
    </script>
    <body>
        <input type="text" name="hogetext1" value="hogehoge"/></td>
        <input type="text" name="hogetext2" value="hogehoge"/></td>
        <input type="text" name="hogetext3" value="ccc"/></td>
        <input type="text" name="hogetext4" value="ddd"/></td>
        <input type="text" name="hogetext5" value="eee"/></td>
	</body>
</html>

ちなみに以下のコードを実行すると、入力時の内容が返却されました。
(hogetext1をaaaとしたところ aaa が返ってきました。)
$('[name^=hogetext]:text[value="hogehoge"]').eq(0).val();

$('[name^=hogetext]:text[value="hogehoge"]').length では常に2が返ってくるのに、、、

行動規範の内容に同意します

回答3件

ベストアンサー

属性セレクタ [value] はvalue属性値を参照しますが、ユーザがテキストボックス(input要素)内の文字列を編集しても、value属性値まで編集されるわけではありません。
後から編集された値はinput要素ノードの value プロパティに格納されている為、そちらを参照します。

属性セレクタとvalueプロパティ - JSFiddle

HTML
1<input type="text" name="hogetext1" value="hogehoge"/>
2<input type="text" name="hogetext2" value="hogehoge"/>
3<input type="text" name="hogetext3" value="ccc"/>
4<input type="text" name="hogetext4" value="ddd"/>
5<input type="text" name="hogetext5" value="eee"/>
6<script>
7'use strict';
8$("[name^=hogetext]").on("blur",function(){
9  if (!$('[name^=hogetext]').filter(function (i, input) { return input.value === 'hogehoge'}).length) {
10  //hogehogeを0個にしてもここには入ってこない。。
11    alert("hogehogeは最低1つ以上必要です。");
12  }
13});
14</script>

Re: masapu さん

投稿2017/06/30 12:34

think49

総合スコア18162

こうするとhogehogeが設定されているhogetextの数を数えてくれます

javascript
1$(function(){
2  $('[name^=hogetext]').on('blur',function(){
3    console.log($('[name^=hogetext]').filter(function(){return $(this).val()=="hogehoge";}).length);
4  });
5});
6