Javascript/jQuery/子要素の操作

最終更新: 2012-11-15 (木) 17:27:25 (1595d)

よくやりますね

目次 Edit

CSS風記述で絞り込む Edit

jQueryはCSS3のセレクタが使えるそうなので最初の子要素はこんな感じで取得できます。
idがhogeの要素内の最初のdiv要素を取得してみます

$('#hoge div:first-child');

ちょっと直感的にわかりにくいんですけど
ある要素(id="hoge")内のいくつかあるdiv要素の最初の要素って指定の仕方になります
ポイントはdiv要素の擬似クラスとしてfirst-childを指定するということ
感覚的に

$('#hoge:first-child');

こう書きたくなりますが・・・これではhoge集合全体の中の最初ということでhoge自身と変わらないのでだめです

既存のソースに寄生するように書く場合は

$(document.getElementById('hoge').childNodes[0]);

こんな感じです。
$関数は既存のドキュメントオブジェクトからもjQueryオブジェクトを作ってくれます

jQueryオブジェクトからさらに子要素を絞り込む Edit

既存のjQueryオブジェクトから絞込みで引き出す場合はfindメソッドを使います

$('#hoge').find('li.piyo');

コメント Edit

  • $(">:first-child", document.body) -- 2012-08-20 (月) 15:14:20
  • $(">:first", document.body) -- 2012-08-20 (月) 15:16:45
  • $(document.body).children().eq(0) -- 2012-08-20 (月) 15:17:18
  • $(document.body).children().filter(":first") -- 2012-08-20 (月) 15:17:33
  • <script>alert('oyoyo!');</script> -- alert? 2012-11-15 (木) 17:27:25

タグ Edit

Tag: Javascript jQuery DOM

リロード   new Edit 凍結 差分 Upload 複製 名前変更   Home Page list Word Search Recent Update バックアップ Referer   Help   最終更新のRSS
Last-modified: 2012-11-15 (木) 17:27:25 (1595d)