• HOME > 
  • JavaScript > 
  • jQueryのclosest()で最も近い親要素を取得する方...

jQueryのclosest()で最も近い親要素を取得する方法【parentとの違い】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

closest()とは?

jQueryのclosest()は要素から最も近い親要素を取得(指定)できるメソッドです。

closest()は指定した要素の親要素を辿っていき、該当するセレクターを持つものを見つけ出してくれるので、例えばAという要素がクリックされたときに、その親要素に対して処理を実行したい場合などに活用することができます。

closestメソッドの書き方は次の通りです。

closestメソッドの書き方

下の例では、クラス「sample」を持つ親要素の背景色を変更しています。元となる要素「#targetA」の親要素には「#parents1」「#parents2」「#parents3」が該当し、その中でクラス「sample」を持つのは「parents2」なので、その背景色だけが変更されます。

HTML

<div id="parents1">#parents1
    <div id="parents2" class="sample">#parents2
        <div id="parents3">#parents3
            <p id="targetA">ターゲット</p>
        </div>
    </div>
</div>

jQuery

$("#targetA").closest(".sample").css({
    "background":"#c9c9c9",
    "color":"#fff"
});

プレビュー

closestメソッドの例
リンク先のサムネイル
jQueryでCSSを操作する方法【css()とaddClass()メソッドの使い方】

jQueryでCSSを操作するには、「css()メソッドを使って要素のCSSのプロパティとその値を直接操作する」と「addClass()とremoveClass()メソッド要素にクラス名を追加・削除する」という2つの方法が...【もっと読む】

parent()との違い

closestと同じように親要素を辿って取得・操作できるメソッドに「parent()」があります。

両者には次のような機能の違いがありますので、状況に応じた使い分けが必要です。

  • closest()は指定した要素を見つけるまで親要素を辿る
  • parent()は一階層上の親要素のみを対象にする

parent()の使い方

parentの記述方法はclosestと同じです。

parentメソッドの書き方

一階層上の親要素が指定したセレクターを持っていればclosestと同様に取得・操作できます。

HTML

<div id="parents1">#parents1
    <div id="parents2">#parents2
        <div id="parents3" class="sample">#parents3
            <p id="targetB">ターゲット</p>
        </div>
    </div>
</div>

jQuery

$("#targetB").parent(".sample").css({
    "background":"#c9c9c9",
    "color":"#fff"
});

プレビュー

parentメソッドの例

しかし次の例のように、それより上の階層にある親要素が指定したセレクターを持っていても、parent()がチェックするのは一階層上のみなので取得・操作することはできません。

HTML

<div id="parents1">#parents1
    <div id="parents2" class="sample">#parents2
        <div id="parents3">#parents3
            <p id="targetB">ターゲット</p>
        </div>
    </div>
</div>

jQuery

$("#targetB").parent(".sample").css({
    "background":"#c9c9c9",
    "color":"#fff"
});

プレビュー

parentメソッドの例

一方、closest()の場合は、冒頭の例のように指定したセレクターを持つ親要素が見つかるまで階層を上りつづけます。

逆を言えば、一階層上の親要素だけを対象にしたい時にはclosest()は不向きです。

まとめ

以上がjQueryのclosest()で最も近い親要素を取得する方法です。

親要素を操作するときに用いるclosestとparentという2つのメソッドの違いを理解しておくことが肝心です。

関連する記事

サムネイル

Javascriptのlightboxライブラリの使い方【画……

2023年10月01日
最終更新日:2023年09月12日
lightboxライブラリでできること Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。 一覧では小さい画像を並べて […]
サムネイル

HTMLのチェックボックスに選択上限を設ける方法【Javas……

2023年10月01日
最終更新日:2023年09月28日
チェックボックスに選択上限を設けるには、JavaScriptを使ってチェックの数をカウントし設定した数を超えたらチェックできないようにします。
サムネイル

横スクロール可能なことを示すヒントを表示するJavascri……

2023年09月01日
Javascriptのライブラリ「ScrollHint(スクロールヒント)」を使えば、ユーザーに対して要素がスクロール可能であることをわかりやすく示すアイコンを表示することができます。
サムネイル

JavascriptでブラウザやOSを判定する方法【plat……

2023年09月01日
Javascriptのplatform.jsというライブラリを利用すれば、簡単にユーザーが使用しているブラウザやOS情報を取得し判別する処理を作ることが可能です。
サムネイル

Javascriptでフォーム送信時に確認ダイアログを出す方……

2023年09月01日
Javascriptでフォーム送信時にダイアログ表示させてユーザーに処理を続行して良いか確認するには「confirmメソッド」と「onsubmit属性」の2つを使用します。
サムネイル

Javascriptで文字のUnicode(UTF-16)を……

2023年09月01日
最終更新日:2023年08月29日
JavascriptのcharCodeAtを使うと、日本語(テキスト)のUnicode(UTF-16)を取得したり、Unicode(UTF-16)をテキストに変換することが可能です。
サムネイル

jQueryのblurでフォーカスが外れた時の処理を行う方法……

2023年05月01日
最終更新日:2023年05月31日
jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。