最も近い先祖要素の取得

最も近い先祖要素を取得するには、element.closestメソッドを使用します。

※ IE11以下は対応していません。

構文

var parentElement = element.closest(selector);

引数名		型	説明
第一引数必須	selector	string	検索する要素のセレクター

戻り値

見つかった場合は見つかったエレメント、見つからなかった場合はnullを返します。

サンプルコード

JavaScript

var sampleElement = document.getElementById('sample'),
    parentElement = sampleElement.closest('.outer');

alert(parentElement.outerHTML);

IE11以下の対応について

IE11以下ではelement.closestに対応していないため、次のようにすることで対応することができます。
ただし、この実装についてはIE8以下には対応していません。

関数定義

JavaScript

/**
 * 最も近い先祖要素の取得
 * @param {Element|Node} elem 検索元の要素
 * @param {string} selector 検索する要素のセレクター
 * @return {Element|null} 見つかった場合は見つかった要素、見つからなかった場合はnullを返す
 */
var getClosestElement = function(elem, selector) {
	var matchElems = document.querySelectorAll(selector),
	    prevElem   = elem.parentElement,
	    i = 0, len = matchElems.length;

	if (typeof selector !== 'string' || selector === '') return prevElem;

	while (prevElem) {
		for (i = 0; i < len; i++) {
			if (matchElems[i] === prevElem) return prevElem;
		}
		prevElem = prevElem.parentElement;
	}

	return null;
};

使い方

引数

引数名		型	説明
第一引数必須	elem	Element	検索元の要素
第二引数必須	selector	string	検索する要素のセレクター

戻り値

見つかった場合は見つかった要素、見つからなかった場合はnullを返します。

サンプルコード

JavaScript

var sampleElem = document.getElementById('sample'),
    parentElem = getClosestElement(sampleElem, '.outer');

alert(parentElem.outerHTML);

JavaScript逆引きリファレンス一覧へ戻る