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

106

06 апреля 2021, 14:30

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

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

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

<table id="some">
    <tbody>
        <tr><td><input id="myInput" type="text"></td></tr>
        <tr><td></td></tr>
        <tr><td></td></tr>
    </tbody>
<table>

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

Answer 1

let elem = document.getElementById("myInput");
let elemId = elem.closest('table').id; // table id = some...

По сути, через тот же closest() можно искать и родителя, тут в зависимости от ситуации варианты рассматривать надо

Answer 2

Есть метод closest, который помогает искать родителя по какому-то селектору.

В случае с вашей таблицей:

const input = document.getElementById('myInput'); 
const table = input.closest('#some'); 
if (table) { 
  console.log('Parent of input is: ', table); 
}

<table id="some"> 
    <tbody> 
        <tr><td><input id="myInput" type="text"></td></tr> 
        <tr><td></td></tr> 
        <tr><td></td></tr> 
    </tbody> 
<table>

Полезные ссылки

closest

Answer 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; 
    }; 
}

Answer 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));

<div id="x1"> 
  <div id="x2"> 
    <div id="x3"> 
      <div id="x4"> 
        <div id="x5"> 
          <div id="x6"></div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>