jQueryを使えば、指定した要素に対し、直前/直後の兄弟要素や親子関係にある要素を取得することが出来ます。
class名が付いていなかったり、タグが特定できない場合に便利です。
兄弟要素を取得する
prev() 直前の要素を取得する
prev()は直前の兄弟要素を取得します。
サンプルでは .wrap の直前のdiv要素に対し、CSSを追加しています。
<ul> <li>取得されません</li> <li>取得されません</li> </ul> <!--ここから取得--> <div> <h2>ここのタイトルが赤くなります</h2> <p>ここのテキストが赤くなります</p> <p>ここのテキストが赤くなります</p> </div> <!--ここまで取得--> <div class="wrap"> <h2>タイトル</h2> <p>取得されません</p> <p>取得されません</p> </div> <script> $(function(){ $('.wrap').prev().css('color','red'); }); </script>
prev(‘要素名’) 前の要素を絞り込んで取得
prev()は直前の要素名を指定することもできます。
サンプルでは .wrap の直前のdiv要素を取得してCSSを追加していますが、仮に直前の要素がdivではなかった場合、CSSは反映されません。
<ul> <li>取得されません</li> <li>取得されません</li> </ul> <!--ここから取得--> <div> <h2>ここのタイトルが赤くなります</h2> <p>ここのテキストが赤くなります</p> <p>ここのテキストが赤くなります</p> </div> <!--ここまで取得--> <div class="wrap"> <h2>取得されません</h2> <p>取得されません</p> <p>取得されません</p> </div> <script> $(function(){ $('.wrap').prev('div').css('color','red'); }); </script>
prevAll() 前の全ての兄弟要素
prevAll()は直前の全ての兄弟要素を取得します。
サンプルでは .wrap より前のul、div要素に対しCSSを追加しています。
<!--ここから取得--> <ul> <li>ここのテキストが赤くなります</li> <li>ここのテキストが赤くなります</li> </ul> <div> <h2>ここのタイトルが赤くなります</h2> <p>ここのテキストが赤くなります</p> <p>ここのテキストが赤くなります</p> </div> <!--ここまで取得--> <div class="wrap"> <h2>取得されません</h2> <p>取得されません</p> <p>取得されません</p> </div> <script> $(function(){ $('.wrap').prevAll().css('color','red'); }); </script>
next() 次の要素
next()は次の要素を取得します。
サンプルでは .wrap の直後の要素のdivに対し、CSSを追加しています。
<div class="wrap"> <h2>取得されません</h2> <p>取得されません</p> <p>取得されません</p> </div> <!--ここから取得--> <div> <h2>ここのタイトルが赤くなります</h2> <p>ここのテキストが赤くなります</p> <p>ここのテキストが赤くなります</p> </div> <!--ここまで取得--> <ul> <li>取得されません</li> <li>取得されません</li> </ul> <script> $(function(){ $('.wrap').next().css('color','red'); }); </script>
next(’要素名’) 次の要素を絞り込んで取得
next()は直後の要素名を指定することもできます。
サンプルでは .wrap の直後のdiv要素を取得してCSSを追加していますが、仮に直後の要素がdivではなかった場合、CSSは反映されません。
<div class="wrap"> <h2>タイトル</h2> <p>テキストテキスト</p> <p>テキストテキスト</p> </div> <!--ここから取得--> <div> <h2>ここのタイトルが赤くなります</h2> <p>ここのテキストが赤くなります</p> <p>ここのテキストが赤くなります</p> </div> <!--ここまで取得--> <div> <h2>取得されません</h2> <p>取得されません</p> <p>取得されません</p> </div> <script> $(function(){ $('.wrap').next(’div’).css('color','red'); }); </script>
nextAll() 次の全ての兄弟要素
nextAll()は直後の全ての兄弟要素を取得します。
サンプルでは .wrap より後のul、div要素に対しCSSを追加しています。
<div class="wrap"> <h2>取得されません</h2> <p>取得されません</p> <p>取得されません</p> </div> <!--ここから取得--> <div> <h2>ここのタイトルが赤くなります</h2> <p>ここのテキストが赤くなります</p> <p>ここのテキストが赤くなります</p> </div> <ul> <li>ここのテキストが赤くなります</li> <li>ここのテキストが赤くなります</li> </ul> <!--ここまで取得--> <script> $(function(){ $('.wrap').nextAll().css('color','red'); }); </script>
親要素を取得
parent() 1階層上の親要素を取得
parent()は1つ上の親要素を取得します。
サンプルでは、h2の親であるdiv.wrap2に対してCSSを追加しています。
<div class="wrap1"> <p>取得されません</p> <!--ここから取得--> <div class="wrap2"> <h2>ここのタイトルが赤くなります</h2> <p>ここのテキストが赤くなります</p> <p>ここのテキストが赤くなります</p> </div> <!--ここまで取得--> </div> <script> $(function(){ $('h2').parent().css('color','red'); }); </script>
parent(‘要素名’) 親要素を絞り込んで取得
parent()は親の要素を指定することもできます。
サンプルではh2の親のdiv要素を取得し、CSSを追加していますが、親がdivでなかった場合はCSSは反映されません。
<div class="wrap1"> <p>ここのテキストは変わりません</p> <!--ここから取得--> <div class="wrap2"> <h2>ここのタイトルが赤くなります</h2> <p>ここのテキストが赤くなります</p> <p>ここのテキストが赤くなります</p> </div> <!--ここまで取得--> </div> <script> $(function(){ $('h2').parent('div').css('color','red'); }); </script>
parents() 上位階層の全親要素を取得
前項と似た名前なので紛らわしいのですが、こちらはparents()で複数形です。全ての親要素を取得します。
サンプルではh2の親要素全て .wrap1 .wrap2 .wrap3 が対象になります。
<!--ここから取得--> <div class="wrap1"> <p>ここのテキストが赤くなります</p> <div class="wrap2"> <p>ここのテキストが赤くなります</p> <div class="wrap3"> <h2>ここのタイトルが赤くなります</h2> <p>ここのテキストが赤くなります</p> <p>ここのテキストが赤くなります</p> </div> </div> </div> <!--ここまで取得--> <script> $(function(){ $('h2').parents().css('color','red'); }); </script>
parents(‘要素名’) 上位階層の全親要素から絞り込んで取得
parents(‘要素名’)で取得する親要素を絞り込むことも可能です。
サンプルでは親要素を.wrap2と指定しているので、.wrap2で囲われた部分のみにCSSが適用されます。
<div class="wrap1"> <p>取得されません</p> <!--ここから取得--> <div class="wrap2"> <p>ここのテキストが赤くなります</p> <div class="wrap3"> <h2>ここのタイトルが赤くなります</h2> <p>ここのテキストが赤くなります</p> <p>ここのテキストが赤くなります</p> </div> </div> <!--ここまで取得--> </div> <script> $(function(){ $('h2').parents('.wrap2').css('color','red'); }); </script>
子要素を取得
children() 全ての子要素を取得
children()は全ての子要素を取得します。
サンプルでは.wrapの子要素である直後のp、div、孫要素のh2、pにCSSが追加されます。
<div class="wrap"> <!--ここから取得--> <p>ここのテキストが赤くなります</p> <div> <h2>ここのタイトルが赤くなります</h2> <p>ここのテキストが赤くなります</p> <p>ここのテキストが赤くなります</p> </div> <!--ここまで取得--> </div> <script> $(function(){ $('.wrap').children().css('color','red'); }); </script>
children(‘要素名’) 指定した要素の子要素を取得
children(‘要素名’)で取得する子要素を絞り込むことも可能です。
サンプルでは.wrapの子要素のpタグにだけCSSが追加されるようにしています。
孫要素は取得しないので、仮にh2を指定しても取得できません。
<div class="wrap"> <!--ここから取得--> <p>ここのテキストが赤くなります</p> <!--ここまで取得--> <div> <h2>取得されません</h2> <p>取得されません</p> <p>取得されません</p> </div> </div> <script> $(function(){ $('.wrap').children('p').css('color','red'); }); </script>
find(‘要素名’) 全子孫要素から指定した要素を取得
find(‘要素名’)は、指定した要素を全ての子孫要素から取得します。
サンプルでは、.wrapの子孫のpタグのみにCSSが追加されるようにしています。
<div class="wrap"> <!--ここから取得--> <p>ここのテキストが赤くなります</p> <!--ここまで取得--> <div> <h2>取得されません</h2> <!--ここから取得--> <p>ここのテキストが赤くなります</p> <p>ここのテキストが赤くなります</p> <!--ここから取得--> </div> </div> <script> $(function(){ $('.wrap').find('p').css('color','red'); }); </script>