Страницы

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

среда, 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));


  

    

      

        

          

        

      

    

  








Автор:



на






















Ярлыки:
,
,














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















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

















Подписаться на:
Комментарии к сообщению (Atom)