0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptを基本からまとめてみた【8】【closest()メソッド】

Last updated at Posted at 2021-08-06

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##「closest」とは

『closest()』は、基本的に親要素を取得することができるメソッド。
ただし、検索性と高速性を兼ね備えているのが特徴で、指定した「タグ・属性」を持つ親要素を瞬時に探し出せる。

##「closest」の使い方

直近の親要素を「closest」で取得する

一般的な記述方法としては、【要素.closest(セレクタ)】のように対象要素へセレクタを指定する。

sample.html
<body>
    <div class="wrap">
    <ul>
        <li>項目1</li>
        <li>項目2</li>
        <li>項目3</li>
    </ul>
    </div>
    <script>
        var result = $('li').closest('div');
        console.log( result );
    </script>
</body>

このli要素に対して、「.closest(‘div’)」と記述することで親要素に「div要素」があるかどうかをチェックできる。注意点は、li要素から最も近い場所にある対象のdiv要素だけを取得するという点で、親要素としてdivタグが複数あったとしても、最初に合致したdiv要素だけを取得する。

##参考サイト
[【jQuery入門】closest()で親要素を取得する方法まとめ!]
(https://www.sejuku.net/blog/36728)

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?