jQueryjQueryでボタンとかをクリックしたときのエフェクト。後処理とかの都合で他のセクションにクラスを付与したい時があると思うのですが、そのときに必須なのが「親要素の取得」。種類がありますが、これはjQueryをコーディングするうえで全部知って、使い分けたほうが良いので、メモしておきます。今回は、1パターンのHTML(idとかだけちょっと違う)をベースに、jQueryのプロパティだけ変えて同じ指定をしてみました!なのでどのように親要素を取得しているか解りやすいかと思います。具体的には、親要素に赤い枠線が付きます。ベースとなるHTMLは以下。id="【IDだけ変えてます。&lt;button&gt;&lt;strong&gt;clickするとborderがつきます&lt;/strong&gt;。その違いで各プロパティの動作の違いが解りやすいかと思います。id="【IDだけ変えてます。class="div1"&gt;&lt;button&gt;&lt;strong&gt;clickするとborderがつきます&lt;/strong&gt;。その違いで各プロパティの動作の違いが解りやすいかと思います。.closest()の使い分け解説!するためのデモ.parent()直近の親要素を取得します。ボタンをクリックして、その一個上の親要素を取得したい場合には最適です。引数にタグなどを指定することで、引数と合致する親要素のときのみ取得します。以下の例だと、親要素がdivのときだけborderをつけています。red");});.parents()親要素、先祖要素まで取得します。ボタンをクリックして、そのボタンが結構HTML上でネストされていた場合には便利です。引数にタグなどを指定することで、引数と合致する要素を全て取得します。以下の例の場合だと、button以上のdiv全てにborderをつけています。DOMの監視範囲が広いため、処理は比較的遅め。red");});.closest()親要素、先祖要素のうち、引数に指定したタグやクラス、idと合致する要素で、アクションを起こした要素から見て、直近の要素を取得します。ボタンをクリックして、そのボタンから見て親要素や先祖要素の内で.closest(引数)に指定した「引数」と合致するものが見つかるまで遡るということです。以下の例だと、buttonから一番近い親要素のdivにborderをつけています。.closest()の使い分け解説!するためのデモいかがでしたか。実はまだparentsUntil()という、検索範囲を指定できるものもあります。使いどころが全くわからないことと少し眠いため今回は説明を割愛いたします。リンクを貼っておくのでぜひ学んでおきましょう!ちなみに未だかつて使おうとも思ったことがないしなんなら”あ、これだ!”と閃いたこともありません。リファレンス:parentsUntilしかし...こういうの、Javascriptでそのままやろうと思うともっと面倒なんですよね。ホントjQueryには頭があがりません。!前の記事4倍使いやすくなる!おすすめSublimetextパッケージ(アドオン)!次の記事JQuery無し。音楽Profile東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。