javascript - Angular 8 - 如何按类名获取最近的父级？

Question

这就是我想要实现的（将此视为示例场景） -

• 元素 1
  • 元素 2
  • 元素 3
    • 元素 4

元素 4 是我的角度分量。我想根据元素 1 和元素 2 的高度来设置它的高度。

元素 1 和元素 2 可以位于元素层次结构中的任何位置，即它们不一定是直接父级或兄弟级。我希望能够通过类名获取元素 1 和元素 2 的引用并获得它们的高度。

按类名或任何其他选择器以角度查询父元素的最佳方法是什么？

标签： javascriptangularselectorangular-directiveangular8

Answer 1

请注意，这并不是真正的最佳实践类型的方法。迭代发生 100 次，希望根据类名寻找父元素。

/**
 * findParentElementByClass, returns an parent element based on a 
 * class name. This parent class name is chained off the required 
 * child component.
 * 
 * @param  {String} parentClass    // parent class
 * @param  {String} componentClass // Element 4 class in your case
 * @return {Node} componentParent          
 */
function findParentElementByClass(parentClass, componentClass) {
    let componentParent = document.querySelector(`.${componentClass}`).parentNode;

    for (let i = 0; i < 100; i++) {
        if (componentParent.classList.contains(`.${parentClass}`)) {
            break;
        } else {
            componentParent = componentParent.parentNode;
        }
    }

    return componentParent;
}