「脱jQuery」 生JSで.closest()のように直近の親要素を取得する
jQueryでは直近の親要素を取得するときに便利な .closest()
関数が実装されています。生JSでどのように書くことができるのか紹介します。
jQuery
$('.selector').closest('.target');
.selector
から 最も近く て、クラス名が .target
である 親要素 を取得します。
生JS
function closest(node, selector) {
// IEや一部ブラウザでは.closet()が実装されていないので自前も用意
return (node.closest || function(_selector) {
do {
// nodeとselectorがマッチしたら返す
if ((node.matches || node.msMatchesSelector).call(node, _selector)) {
return node;
}
// マッチしなかったら親要素を代入
node = node.parentElement || node.parentNode;
} while (node !== null && node.nodeType === 1);
return null;
}).call(node, selector);
}
モダンブラウザでは .closest()
が実装されているのでそのまま使うことができますが、 IE などでは実装されていないので自分で書く必要があります。
closest(document.querySelector('.selector'), '.target');
このように使うことができます。
CSS本執筆しました!!!
CSS本出します!1/29発売予定
— たかもそ@CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs