jQueryで親要素を取得するソースコード【サンプル有】

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メソッドの使用例

例えば、フォーム内の送信ボタンを押した時、同じ<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>
実行結果
苗字を入力
名前を入力
以上、jQueryで親要素を取得するソースコード、でした。

コメント

タイトルとURLをコピーしました