はじめに
学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。
「closest」とは
『closest()』は、基本的に親要素を取得することができるメソッド。
ただし、検索性と高速性を兼ね備えているのが特徴で、指定した「タグ・属性」を持つ親要素を瞬時に探し出せる。
「closest」の使い方
直近の親要素を「closest」で取得する
一般的な記述方法としては、【要素.closest(セレクタ)】のように対象要素へセレクタを指定する。
sample.html
<body>
<div class="wrap">
<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
</div>
<script>
var result = $('li').closest('div');
console.log( result );
</script>
</body>
このli要素に対して、「.closest(‘div’)」と記述することで親要素に「div要素」があるかどうかをチェックできる。注意点は、li要素から最も近い場所にある対象のdiv要素だけを取得するという点で、親要素としてdivタグが複数あったとしても、最初に合致したdiv要素だけを取得する。