HOMEjQuery【jQuery】親要素を取得する【jQuery】親要素を取得する2018.07.24jQueryBこんにちは、ryohei(@ityryohei)です!jQueryであるアクションの後に親要素を取得して何かする、という処理を記述する場合、必要な親要素の取得。ある要素が選択されたらその親要素を取得してごにょごにょしよう!とすると、下記のような流れになると思います。らかの処理クリックイベントの後、親要素を適切に取得できなければ次の処理に移れませんね。jQueryで親要素を取得する方法はいくつかあり、下記が親要素を取得できるメソッドになります。表の右側にはメソッドの特徴を記載しています。parent()指定した要素から見て、一つ上の親要素を取得するparents()指定した要素から見て、すべての親要素を取得するparents(selector)指定した要素から見て、selectorと一致するすべての親要素を取得するclosest(selector)指定した要素から見て、selectorに指定した最初の親要素を取得するでは、実際に各メソッドを使って、詳細を見てみましょう!(下記ではconsole.logの実行結果を記載していますが、ソースにはconsole.logは記述しておりませんので、予めご了承ください。)parent()parent()は、指定した要素から見て、一つ上の親要素を取得するメソッドです。実際にbuttonを指定して、いくつかのパターンでparentを実行してみましょう。0実行結果を見てわかるように、parentメソッドでは指定した要素から見て一つ上の親要素しか取得することができません。一つ以上の上の階層にある親要素を取得したい場合は下記で紹介するメソッドを使います。[ads_middle]parents()parents()は、指定した要素から見て、すべての親要素を取得するメソッドになります。selectorを指定した場合は、selectorと一致するすべての親要素を取得します。実際にbuttonを指定して、いくつかのパターンでparentsを実行してみましょう。実行結果から見てわかるように、selectorを指定しなかった場合はすべての親要素を、selectorを指定した場合は一致するすべての親様子を取得します。基本的に親要素の取得はparentsを利用すれば可能ですが、パフォーマンスはあまりよくないと言われています。処理内容によっては、複数存在する要素であっても最初に一致した親要素だけを取得したい場合があります。パフォーマンスが良く、最初に一致した親要素だけを取得したい場合に利用するのが、下記のメソッドになります。[ads_middle]closest()closest()は、指定した要素から見て、selectorに指定した値と一致する最初の親要素を取得するメソッドです。実際に使ってみるとどのようなメソッドかおわかりいただけると思います。上記のように、closestは指定したselectorと最初に一致する親要素を取得することができます。parentsと比べてパフォーマンスが良いとされています。jQueryで親要素を取得したい場合は基本的にはclosestを利用するようにして、closestが苦手な部分は本記事で紹介した他のメソッドを利用するようにすると良いかもしれません。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。