[jQuery] $()で取得したものはelementそのものではない

2013年1月15日 propg IT, JavaScript, 0

jQueryはとても便利なんですが、素のJavaScriptではないため、
同じように使おうとすると、ところどころつまづきます。
つまづいた一例を紹介します。

jQueryの最も便利な機能として、$()によるアクセスがありますが、
これがいまいちわかりにくい。

例えば、

<audio id="testSound">
    <source src="./test.mp3" type="audio/mp3">
</audio>

というエレメントをhtmlに書いた場合、

jQueryからは、$(“#testSound”)でアクセスが可能です。
ただし、このオーディオを再生しようとして、

$("#testSound").play()

などと書くと、エラーとなります。　(TypeError: $(“#testSound”).play is not a function)

実際に$(“#testSound”)で取得された値をFireBugで確認してみると

[audio#testSound]

のような表示になります。
これはエレメントそのものではなく、配列として取得されていることを表しています。

そのため、このaudioエレメントに直接アクセスしたい場合は、

$("#testSound").get(0).play()

とアクセスする必要があるのです。

とても理解しにくい仕様ですが、jQueryのセレクタの仕様として理解するしか有りません。
idへのアクセスなので、配列の中身は常に１つのみになるはずですけどね。

これまでは、

documen.getElementById("testSound")

と同じものなんだと理解していましたが、若干間違ってました。。。

むずかしい。。

== ランキングに参加しています。ぜひクリックお願いします ==

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。