jQueryで親要素を取得するclosest,parent,parentsの使い方【サンプル有】
jQueryで親要素を操作したい時の処理をまとめました。
手前の親要素を取得する.parent
.parent()メソッドは、指定した要素の直上の親要素を指定します。
.parent().parent()のように繋げることで、「親要素の親要素」といった指定も可能です。
サンプルコード
<div class="postbox ex_01">
1
<div class="postbox ex_02">
2
<div class="postbox ex_03">
3
</div>
</div>
</div>
<script>
$(function(){
//親要素の背景を赤色にする
$('.ex_03').parent().css('background-color', 'red');
//親要素の親要素の背景を青色にする
$('.ex_03').parent().parent().css('background-color', 'blue');
});
</script>
1
2
3
先祖要素を含めた、すべての親要素を取得する.parents
.parents()メソッドは、指定した要素すべての親要素を取得します。
()内で要素の検索条件を入れないと、bodyタグまで遡ってしまうので、基本的にカッコの中に検索条件を指定して使用することになります。
サンプルコード
<div class="postbox ex_11">
1
<div class="postbox ex_12">
2
<div class="postbox ex_13">
3
</div>
</div>
</div>
<script>
$(function(){
//すべての親要素が持つ「.postbox」の背景を赤色にする
$('.ex_13').parents('.postbox').css('background-color', 'red');
});
</script>
1
2
3
直近の親要素を指定する.closest
.parents()メソッドは、指定した要素の直近の親要素を取得します。
引数内に検索条件を含めると、すべての親要素の中から最も近い要素を検索して取得できます。
セレクト自身も検索対象に含まれます
なので、基本的にカッコ内に条件を入れて運用することになると思います。
サンプルコード
<div class="postbox ex_21">
1
<div class="postbox ex_22">
2
<div class="postbox ex_23">
3
</div>
</div>
</div>
<script>
$(function(){
//直近の親要素「.postbox」の背景を赤色にする
$('.ex_23').closest('.postbox').css('background-color', 'red');
});
</script>
1
2
3
closestメソッドの使用例
直近の親要素のIDを取得する
例えば、クリックした要素の直近の親要素が、何のidを持つかを調べたい時もclosestを活用できます。
サンプルコード
<div id="test1">
<p>子要素1</p>
</div>
<div id="test2">
<p>子要素2</p>
</div>
<div id="test3">
<p>子要素3</p>
</div>
<script>
$(function(){
$('p').click(function(){
var id = $(this).closest('[id]').attr('id');
alert(id);
});
});
</script>
子要素1
子要素2
子要素3
クリックしたpタグの親要素にidがある要素があるか調べて（セレクタの属性参照）、attr()でidの値を取得しています。
属性セレクタの参照、$(this)、attr()の使い方も併せて覚えておきましょう。
フォーム親要素以下のinput要素の値を調べる
例えば、フォーム内の送信ボタンを押した時、同じ<from></from>内のinput要素に値が入っているかのチェックの時、ボタンと同じformに囲まれたinput要素をチェックする必要があります。
そういう時、ボタン押下時にformの親要素を取得することで、.find()と合わせることでform内のinput要素の値の有無を検索できます。
サンプルコード
<form>
<div>苗字を入力</div>
<input type="text" name="fastname" value="" placeholder="苗字を入力">
<div>名前を入力</div>
<input type="text" name="lastname" value="" placeholder="名前を入力">
<input type="button" class="namepost" value="送信する">
</form>
<script>
$(function(){
$('.namepost').click(function(){
var error_flg = false;
//ボタンを押した<form>内に含まれているinput要素をすべてeachで取得し、未入力のものがないか調べる
$(this).closest('form').find('input').each(function(key, value){
if(!$(value).val()){
error_flg = true;
}
});
if(error_flg){
alert('未入力の項目があります。');
}else{
alert('OK!');
}
});
});
</script>
子要素を取得するfind()、要素を繰り返すeach()と併用して実現しています。
この2つのメソッドの使い方もチェックしておきましょう。
以上、jQueryで親要素を取得するclosest,parent,parentsの使い方、でした。