jQueryのセレクターまとめ<階層編>

jQueryのセレクターまとめ<基本編>の続きで今回は階層を持つ要素のセレクト方法についてまとめていきます。

//祖先の関係で指定する。「スペース」でつなげる。
$('div p').hide()
//<div><h1><p>text</p></h1></div>の<p>text</p>などが指定されます

//親子の関係で指定する。「 > 」でつなげる。
$('div>p').hide()
//<div><p>text</p></div>の<p>text</p>などが指定されます

//前後の関係で指定する。「 + 」でつなげる。
$('h1+p').hide()
//<h1>text1</h1><p>text2</p>のなどが指定されます

//兄弟の関係で指定する。「 ~ 」でつなげる。
$('#idname~p').hide()
//<div><div id="idname"></div><p>text</p></div>の<p>text</p>などが指定されます

これくらい知っていれば、あとはこれらの組み合わせで自分の思う要素を指定できるのではないでしょうか!

他にもいろいろあるので 「jQuery selector」 等で検索するとうまくjavascriptで要素を指定して動かすことができると思います!