javascript:for の小ネタ

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

ふと、さらに追記ｗ（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

id で同じ prefix のチェックボックスと同期
<input type="checkbox" name="same[]" id="a1" onclick="BoxSyncById(this);" />

<input type="checkbox" name="same[]" id="a2" />
<input type="checkbox" name="same[]" id="a3" />
<input type="checkbox" name="same[]" id="a4" />
<input type="checkbox" name="same[]" id="a5" />

id で同じ prefix のチェックボックスと同期
<input type="checkbox" name="same[]" id="b1" onclick="BoxSyncById(this);" />

<input type="checkbox" name="same[]" id="b2" />
<input type="checkbox" name="same[]" id="b3" />
<input type="checkbox" name="same[]" id="b4" />
<input type="checkbox" name="same[]" id="b5" />

同じ name のチェックボックスと同期
<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/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 扱いの１回が余分になるのと、この場合は無いだろうけど els[i] が undefined になった時点で for が止まるので length 分総なめしたい時には不向きだよなぁ。

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

Comments

ループを早くする方法

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

私が書いた記事の手法。上のサイトでは「reverse loop」と書かれているね。
他にも色々パフォーマンスを上げる方法が書かれて、良い感じなのでコメに追記。

Posted by Hifa at 2011年10月09日 13:34