2010年03月26日

javascript:for の小ネタ

for の小ネタと checkbox を同期させる tip の例です。
すみません。色々間違ってましたので改めて書き直しました。(同日追記)

ふと、さらに追記w(10/03/29)

for で走査したいとき・・・。

elements = document.getElementsByTagName('DIV');
for(var i = 0, l = elements.length; i < l; i++) 処理・・・

なんてのが常道なのかな。
ちなみに l に length 入れるのは、その方が速いから。
そこで

elements = document.getElementsByTagName('DIV');
for(var l = elements.length; l--;) 処理・・・

こうするともっと速くなるし、変数も一つ減る。
で以降、実例です。



 ちょっとした tip


<input type="checkbox" name="same[]" id="a1" onclick="BoxSyncById(this);" />





<input type="checkbox" name="same[]" id="b1" onclick="BoxSyncById(this);" />





<input type="checkbox" name="same[]" onclick="BoxSyncByName(this);" />

 ソース

function BoxSyncByName(o){
  if(typeof(o) == 'string') o = document.getElementById(o);
  if(o && o['for']) o = document.getElementById(o['for']);
  if(!o || !o.name) return;
  var els = o.form[o.name], flg = o.checked;
  for(var e, i = els.length; i--;) if(
    (e = els[i]) && e.type && e.type.toLowerCase() == 'checkbox'
  ) e.checked = flg;
}

function BoxSyncById(o){
  if(typeof(o) == 'string') o = document.getElementById(o);
  if(o && o['for']) o = document.getElementById(o['for']);
  if(!o || !o.id.match(/^([a-z_\-]+)[0-9]+$/i) || !RegExp.$1) return;
  var flg = o.checked,
   reg = new RegExp("^" + RegExp.$1 + "[0-9]+$"),
   els = document.getElementsByTagName('input');
  for(var e, i = els.length; i--;) if(
    (e = els[i]) && e.type && e.type.toLowerCase() == 'checkbox' &&
    e.id && e.id.search(reg) === 0
  ) e.checked = flg;
}


■ BoxSyncByName(o)

同じ name の checkbox を同期
o : checkbox element かその id
: またはその checkbox を指す label element。この場合は for より checkbox そ探す

■ BoxSyncById(o)

id の prefix が同じ checkbox を同期
o : checkbox element かその id
: またはその checkbox を指す label element。この場合は for より checkbox そ探す

■ 動作確認

ie:5.0, 5.5, 6, 7, 8
ff:1.0, 1.5, 2, 3
chrome:4
safari:4(win)
opera:8.53, 9.02, 10.10
sleipnir:2.3
netscape:7.1

opera7.02 label element の for 取得では動作しない
ie4, netscape6.2 動作しない

10分程度で終わらすつもりが・・・。
間違いに気づいて書き直し、さらにその補填?お詫びw?で実例。
初期投稿1:30。今、4:00!かよぉ。もう間違いないよなぁ・・・。
なんかボロボロすぎる。もう寝よう・・・。


 ふと、さらに追記w(10/03/29)

ソースの for の後 els[i] を e で置き換えたんだけど、どうせ e で置き換えるんなら以下の様にも。

for(var e, i = els.length; (e = els[--i]);) if(
e.type && e.type.toLowerCase() == 'checkbox'
) e.checked = flg;

ただ、これ for 内で置き換えてるので、(e = els[--i]) が最後の false 扱いの1回が余分になるのと、この場合は無いだろうけど els[i] が undefined になった時点で for が止まるので length 分総なめしたい時には不向きだよなぁ。

たかがこんだけのもんなのにあーだこーだ考えるのは、飲み込みが悪いからだろうなぁ・・・。




posted by HiFa at 01:30 | 🌁 | Comment(1) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする
>>> スパムコメントは消してますよん。 お互い無駄な労力は避けましょう。 <<<

この記事へのコメント

ループを早くする方法

Zakas’ JavaScript performance tips
http://james.padolsey.com/javascript/zakas-javascript-performance-tips/

私が書いた記事の手法。上のサイトでは「reverse loop」と書かれているね。
他にも色々パフォーマンスを上げる方法が書かれて、良い感じなのでコメに追記。
Posted by Hifa at 2011年10月09日 13:34
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック