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 · ベストアンサー

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

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

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

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

お礼

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

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

回答No.2

bvltiggeari

No.1です。

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

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

回答No.1

bvltiggeari

こんばんわ！

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

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

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