今でこそ仮想DOM系ライブラリの普及で活躍の場を狭めつつあるjQueryですが、そういうライブラリを入れるのが大げさに過ぎてしまうような、ちょっとしたものを作るには便利なので、今でも活躍の場はそれなりにあります。
そして、メインとなるDOM操作でも、jQueryは単なるDOMのラッパーというわけではなく、便利なメソッドを用意しています。今回のテーマとなる.closestもそんなメソッドの1つです。
.closestメソッド
この.closestメソッドは、ふつうの探索系メソッド(jQueryの.findやDOMのgetElementsByClassNameなど)と違って、親の方へと探索を進めていって、(自分自身も含めて)最初にマッチした要素を返す、というものです(リファレンスの日本語訳)。
「JavaScriptの動作を決めるような特殊なクラスや属性を、親にまとめて書く」というシチュエーションなど、ちょくちょく使えるメソッドです。
jQueryなしで書くには?
こういう挙動をjQueryなしでするにはどうすればいいのか調べていたのですが…なんと最近のブラウザはDOMに直接Element.closestを実装していることが判明しました(MDN)。シグネチャもセレクタを渡すという、jQueryと全く同じもので、iOS 9以上など、最近のブラウザならネイティブに使えるとのことでした。IEなど非対応なブラウザ向けに、Polyfillも用意してありました(MDNのページやGitHubにあります)。
「準標準」としてのjQuery
jQueryにしかなかったはずの機能がDOMに実装されたのは、.closestだけではありません。昔はclassNameを自力でパースするしかなかったクラス処理ですが、jQueryにはhasClass、addClass、removeClass、toggleClassとクラス制御に便利なメソッドがあります。その後、DOM側でclassList(MDN)というものが現れて、contains、add、remove、toggleと多くが同じ名前で使えるようになっています。
このように、jQueryはある種、「DOMにあるべき機能の指標」としても機能しています。C++のBoost、RubyのActiveSupportのように、「準標準」とでもいうべきライブラリは、他の言語にも存在しています。