Страницы

Поиск по вопросам

среда, 29 января 2020 г.

На чистом js можно найти предка n-уровня?

#javascript #html


Сейчас, чтобы найти нужного мне предка, я пишу elem.parentElement.parentElement.parentElement.parentElement. 

1) А можно как-то поизящнее?

2) И другой вопрос: есть такая структура:

Как узнать id table (в данном случае это "some"), если известен input#myInput? Спасибо!


Ответы

Ответ 1



let elem = document.getElementById("myInput"); let elemId = elem.closest('table').id; // table id = some... По сути, через тот же closest() можно искать и родителя, тут в зависимости от ситуации варианты рассматривать надо

Ответ 2



Есть метод closest, который помогает искать родителя по какому-то селектору. В случае с вашей таблицей: const input = document.getElementById('myInput'); const table = input.closest('#some'); if (table) { console.log('Parent of input is: ', table); }
Полезные ссылки closest

Ответ 3



Closest не поддерживается IE, так что в дополнение к другим ответам - полифил: if (!Element.prototype.closest) { Element.prototype.closest = function(css) { var node = this; while (node) { if (node.matches(css)) return node; else node = node.parentElement; } return null; }; }

Ответ 4



Если нужен именно n родительский элемент, то можно написать свою функцию: const nParent = (node, n) => { while (node) { if (n-- <= 0) return node; else node = node.parentElement; } return null; } const x6 = document.getElementById('x6'); console.log(nParent(x6,0)); console.log(nParent(x6,1)); console.log(nParent(x6,2)); console.log(nParent(x6,3)); console.log(nParent(x6,4)); console.log(nParent(x6,5)); console.log(nParent(x6,6)); console.log(nParent(x6,7)); console.log(nParent(x6,8));


Комментариев нет:

Отправить комментарий