如何在分配多个属性时不重复自己

Question

我有一个事件侦听器，其回调函数 event 的参数已分配给一个元素。有什么方法可以 select 该元素的第 5 个父元素而无需写下此代码？

event.target.parentNode.parentNode.parentNode.parentNode.parentNode;

Answer 1

没有第 n 个父方法，因此您必须执行一堆 parentNode 或使用 closest(selector)，它将遍历 DOM 树，直到找到匹配项。所以你发现它的一些独特之处并使用它

document.querySelector('input').addEventListener("input", function(evt) {
  const row = evt.target.closest('.row');
  console.log(row);
});

<div class="row">
  <div>
    <div>
      <div>
        <input />
      </div>
    </div>
  </div>
</div>

Answer 2

如果你知道你需要遍历的父元素链的确切数量，那么你可以实现简单的助手

const takeParent = (target, count) => {
  while (--count >= 0) {
    if (target === document) {
      break;
    }
    target = target.parentNode;
  }
  return target;
};

takeParent(myElement, 5); // give 5th parent of myElement or "document" if there are less than 5 parents

Answer 3

当然，有几种方法可以实现这一点。

我。 JQuery 方法：

$('#element1').parents().eq(5);

二．原始 Javascript

Function returnNthParent(n, element) 
{
 parent = element;
    for (i = 0; i < n; i++) 
    {
       parent = parent.parentNode;
    }
 return parent;
}

如何在分配多个属性时不重复自己

How to not repeat myself when assigning several properties

javascript

dom-events