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>
