jQueryのclosest()をJavaScriptで代替するサンプルコード

2023-07-29

jQueryのclosest()メソッドは、指定したセレクタに最も近い親要素を取得するための便利なメソッドです。JavaScriptのみを使用して同様の機能を実現するためには、以下のようなサンプルコードを使用できます。

function closest(element, selector) {
	// 最も近い親要素を取得するためのヘルパーファンクション
	for (; element && element !== document; element = element.parentNode) {
	if (element.matches(selector)) {
		return element;
	}
	}
	return null;
}

// 使用例
var element = document.getElementById('target');
var closestParent = closest(element, '.parent');
if (closestParent) {
	console.log(closestParent); // 最も近い親要素が出力されます
} else {
	console.log('最も近い親要素が見つかりませんでした');
}

このサンプルコードでは、closest()というカスタム関数を定義しています。この関数は、指定した要素(element)から上方向に遡り、最も近い親要素を取得します。指定したセレクタ(selector)と一致する要素が見つかった場合は、その要素が返されます。見つからなかった場合はnullが返されます。

使用例では、elementとして特定の要素を指定し、その最も近い親要素が'.parent'というセレクタと一致するかどうかをチェックしています。結果はコンソールに出力されます。

注意点として、closest()関数はElement.matches()メソッドを使用してセレクタとの一致をチェックしています。このメソッドは一部の古いブラウザではサポートされていない場合があるので、必要に応じてポリフィルを使用するか、代替の方法を検討する必要があります。