Question

我正在尝试创建一个按钮，按下该按钮会返回父母父母的下一个元素。我正在使用

<button (click)="onClick(this)">show more</button>

在html文件和.ts文件中我得到了

onClick(obj) {
    alert(obj.parent().parent().next());
}

Answer 1

您可以在点击功能中传递$event参数，然后使用$event获取子元素，即目标

<button (click)="onClick($event)">show more</button>

HTML文件中的

onClick(e) {
    console.log("Child:", e.target);
    console.log("Parent:", e.target.parentNode); 
    console.log("Parents parent sibling:", e.target.parentNode.parentNode.nextSibling);
}

Answer 2

另一种解决方案，如果需要更多动态信息，可以尝试一下。这样一来，您无需每次手动删除父级深度即可更改HTML代码。

通过在li内部深处的HTML元素上单击事件来更改最接近的li标记中的类的调用函数

setClassOnParent(e, yourClassName){
const parent = this.getParentElByNodeName(e.originalEvent.target, 'li');
parent.classList.add(yourClassName);
}

通过给定的nodeName返回最接近的父对象的函数

getParentElByNodeName(target, nodeName) {
    let actualNode = target.parentElement;
    while (actualNode.nodeName !== nodeName.toUpperCase()) {
        actualNode = actualNode.parentElement;
    }
    return actualNode;
}

如果需要，可以使用封闭元素将功能扩展到应该搜索父母的位置。以“ ul”为例

Answer 3

尝试以下方法：

首先创建对按钮元素的引用

<button (click)="onClick()" #btn>show more</button>

.ts文件

import { ViewChild } from '@angular/core';

@ViewChild('btn') public btn: HTMLButtonElement;

onClick() {
    console.log(this.btn['nativeElement'].parentElement.parentElement.nextSibling);
}

Angular 4从html获取父，子和下一个元素

3 个答案: