jQueryで文字数カウンタ（複数対応）

jQueryのプラグインを作成中です。

指定したテキストフォーム、テキストエリア内の文字数をカウントして、
指定場所に文字数を表示させるというものです。

下記のように記述し、

(function(jQuery) {
jQuery.fn.textCount = function(options) {

//キーボードが押された時にカウント
jQuery(this).live("change keyup",function(){
var count = jQuery(this).val().length;

var disp_area = jQuery(this).attr("id");
jQuery("."+disp_area).html(count+"文字");
});
return this;
};
})(jQuery);


jQuery(".counter").txtCount();
とHTML内で宣言しました。

<textarea id="sample">ここの文字数が</textarea>
<div class="sample">ここに表示</div>

と、ここまではうまくいきました。
が、テキストエリアの数が複数個あり、数が変動するため、IDを配列にしたいと思っています。

そこで、
<textarea id="sample[1]">個々の文字が</textarea>
<div class="sample[1]">ここに表示されない</div>
のように記述しました。

すると文字数が表示されなくなってしまいました。
classやidに配列指定はできないのでしょうか。

また、この場合はどのように宣言するのが正しいのでしょうか。

No.3 ベストアンサー 回答者： fujillin 回答日時： 2012/12/07 22:10

textareaと対になっている表示用のdivの位置関係が一定なら、それを利用して表示するようにしてしまえば、個別のIDは不要になります。

例えばtextareaのすぐ後にdivがあるのなら
　<textarea class="counter"　～～
　<div class="contDisp" ～～

$(this).next("div.countDisp").html(count + "文字");
みたいな感じでいけるかと。

* 対象のtextareaにはclass="counter"があると思うのですが、ご提示のサンプルはidのみのようなので、勝手に追記しています。

この回答へのお礼

ありがとうございました。

コピペミスで、counterをつけるの忘れていました。
提示していただいた内容で解決しました。

お礼日時：2012/12/26 17:46

No.2 回答者： bvltiggeari 回答日時： 2012/12/07 18:43

No.1です。

すいません、表記に誤りがあるので訂正させて下さい。

> idやclassに配列は宣言できませんよ(^^;
正確には「配列で使う文字列が使えない」です。
"["とか"]"は使えないんです。

No.1 回答者： bvltiggeari 回答日時： 2012/12/07 18:41

こんばんわ！

idやclassに配列は宣言できませんよ(^^;
こちらに制約とか書いてあるので、お時間のある時に参照して下さい。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …

> この場合はどのように宣言するのが正しいのでしょうか。
ムリに配列にしなくてもsample1、sample2ってすればいいと思うのですが。
せっかくidとclassが一緒ならOKな汎用的ソースになってますし。

あれ？もしかして認識間違ってるかな？？