C#
 Computer >> コンピューター >  >> プログラミング >> C#

jQueryのclosest()メソッドの使い方を実例付きで解説

jQueryのclosest()メソッドは、選択された要素から出発してDOMツリーを上方向へ辿り、指定した条件に最初に一致する祖先要素を返すためのトラバース系メソッドです。親・子・兄弟といった関係性を利用して要素を操作したい場合に非常に便利です。

構文

closest()メソッドの基本構文は以下のとおりです。

$(selector).closest(filter)

パラメータの説明

  • filter：どの祖先要素を対象にするかを指定するセレクター式です。要素名、クラス名、IDなどを指定できます。
  • 条件に一致する祖先が見つかった時点で探索を終了し、その要素のみを返します。
  • 一致する祖先が存在しない場合は、空のjQueryオブジェクトが返されます。

使用例

それでは、実際にclosest()メソッドを使ったサンプルコードを見てみましょう。この例では、<span>要素から最も近い<ol>要素（祖先）を検索し、背景色や枠線のスタイルを動的に変更しています。

<!DOCTYPE html>
<html>
<head>
<style>
   .demo * {
      display: block;
      border: 2px solid blue;
      padding: 5px;
      margin: 15px;
   }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("span").closest("ol").css({"background-color": "orange", "color": "black","border": "3px dashed orange"});
   });
</script>
</head>
<body class="demo">body
<div style="width:600px;">
<ol>ol
<ol>ol
<ol>ol
<li>li
<span>span</span>
</li>
</ul>
</ul>
</ul>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。<span>要素に最も近い<ol>要素だけがオレンジ色の背景とオレンジ色の破線枠で強調表示され、それより上の階層にある他の<ol>要素には影響しないことが確認できます。

jQueryのclosest()メソッドの使い方を実例付きで解説

まとめ

closest()メソッドは、クリックイベントの発生元から特定の親要素を探したり、動的に生成された要素のコンテキストを辿ったりする際によく使われます。parents()メソッドとの違いは、closest()が「最初に一致した1つの祖先」だけを返す点です。目的に応じて使い分けることで、より効率的なDOM操作が可能になります。

  1. CSSだけでブラウザウィンドウを再現する方法！サンプルコード付きで解説

    CSSを使えば、実際のブラウザウィンドウのような見た目をWebページ上に簡単に再現できます。本記事では、macOS風のウィンドウボタン（赤・黄・緑のドット）やURL入力欄まで含めた、リアルなブラウザウィンドウUIをCSSのみで作成する方法を、完全なサンプルコードとともに解説します。 完成形のイメージ 今回作成するのは、閉じる・最小化・最大化のウィンドウボタン、アドレスバー、右側のメニュードットを備えたブラウザウィンドウです。HTMLとCSSだけで構成されており、JavaScriptは一切不要なので、初心者の方でもすぐに試せます。 サンプルコード 以下がブラウザウィンドウを実現するコード全体です

  2. C++で学ぶ式ツリー（Expression Tree）の基本と具体例

    式ツリーとは何か式ツリー（Expression Tree）とは、二分木の一種であり、木の各ノードが「演算子」または「オペランド（被演算子）」のいずれかで構成される特殊なデータ構造です。数式を木構造として表現することで、コンパイラや電卓アプリなどが数式を効率的に解析・評価できるようになります。ノードの役割式ツリーにおける各ノードは、次のように役割が分かれています。葉ノード（リーフノード）：オペランド（数値や変数）を表します。非葉ノード（内部ノード）：演算子（+、-、*、/ など）を表します。つまり、計算の対象となる値は必ず葉に配置され、それらをどのように処理するかを示す演算子が親ノードとして上に