JavaScrip: DOM: 最も近い先祖の要素を取得する Element.closest()
ID名やCLASS名などで要素を検索し最も近い先祖を取得する DOM JAVASCRIPT
ieを捨てるなら Element.closest() でオッケー
JavaScript:クリックした要素の親から先祖までノードの情報を全て取得する | ハックノート
ieを捨てるなら Element.closest() でオッケー
Element.closest()
Element.closest() - Web API | MDN
closest() は Element インターフェイスのメソッドは、引数で指定されたセレクターに一致する現在の要素の直近の祖先 (または現在の要素自身) を返します。そのような要素が存在しない場合は null を返します。
IE11以下 条件に合う最も近い祖先を取得
var getClosestElement = function(elem, selector) { var matchElems = document.querySelectorAll(selector); if(!matchElems.length){return null;} console.log("bingo"); var ancestorNode = elem.parentNode; while (ancestorNode) { for (var i = 0; i < matchElems.length; i++) { if (matchElems[i] === ancestorNode) return ancestorNode; } ancestorNode = ancestorNode.parentNode; } return null; };
var start_point_elm = document.getElementsById("children2"); var ancestorElement = getClosestElement(start_point_elm, '.outer-container');
IE11以下 条件に合う最も近い兄姉を取得
最も近い先祖要素の取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Websitevar getClosestElement = function(elem, selector) { var matchElems = document.querySelectorAll(selector); var prevElem = elem.previousElementSibling, i = 0, len = matchElems.length; if (typeof selector === 'undefined' || selector === '') return prevElem; while (prevElem) { for (i = 0; i < len; i++) { if (matchElems[i] === prevElem) return prevElem; } prevElem = prevElem.previousElementSibling; } return null; };
参考リンク
JavaScript:クリックした要素の親から先祖までノードの情報を全て取得する | ハックノート