TECH Matari

たとえば、

<div class="readme">続きを読む</div>
<div class="readme">続きを読む</div>
<div class="readme">続きを読む</div>

という構造で、readmeクラスをもつ要素に対し、いちいち onClick=”…”とインラインで記述していくのは面倒だし、コードが汚くなる。そこで、prototype.jsの$$関数を用いて、
[js]
var obj = $$(’div.readme’);
[/js]
とやると、該当のオブジェクトを取得できるのは、prototype.jsの$$関数で書いてあるとおり。

そこに、イベントハンドラを割り当てる方法として、
Think ITにて、amachangが書いてる方法とほぼ同じなのだけれど、
[js]

[/js]

自分は、こう書いてみた。

[js]
var objs = $$("div.readme");

$A(objs).each(
function(o){
Event.observe(o, 'click', eventHandler, false);
}
);
[/js]
$A関数で配列にアクセスし、イテレータを使う方法。

でも、正直、こっちのほうが楽だしわかりやすいな…
[js]
for (var i = 0; i < elements.length; i ++) {
elements[i].observe('click', eventHandler);
}
[/js]

最近（？）のJavaScriptは、１つの処理を行うのにたくさんの方法（記載法）があり、悩んでしまう。豆にリファレンスに目を通しておくしかないよなぁ、、

Popularity: 8% [?]

written by ANN

$$関数でクラス名でdocumentの要素を取得することができる。
→$$(’.hoge’)

$$関数はクラス名で取得するためだけのものではなく、document.getElementsByTagName()の代わりもしてくれる。
→$$(’body’)

そしてさらに以下のような要素の取得も可能。
→$$(’div.hoge div’)

ちなみに

上記のような感じのspanを取得する際に中間のdivを省略してもちゃんと取得できる。
→$$(’div.hoge span’)

結構融通が利く。

参考：
http://www.thinkit.co.jp/free/article/0702/15/6/

Popularity: 5% [?]

written by joy-pop