Javascript “此”父级中的目标子级

假设我有两组div-都有单击按钮，单击按钮时，它将更改该组中子级的文本内容

我如何用纯javascript实现这一点

提前谢谢

HTML

Javascript

---

假设您只想更改父级中的第一个div元素，有一种方法：

var button=document.getElementsByTagNamebutton； Array.frombutton.forEachv=>v.addEventListener'click'，函数{ this.parentNode.children[1].innerHTML='success'； }; 点击 测试1 测试4 点击 测试2 测试5

---

假设您只想更改父级中的第一个div元素，有一种方法：

var button=document.getElementsByTagNamebutton； Array.frombutton.forEachv=>v.addEventListener'click'，函数{ this.parentNode.children[1].innerHTML='success'； }; 点击 测试1 测试4 点击 测试2 测试5 只需使用this关键字确定单击了哪个按钮，然后获取其.parentNode，然后获取其.children，选择第二个[1]并更改文本，如下所示：

var按钮=document.querySelectorAllbutton； fori=0；i var按钮=document.querySelectorAllbutton； fori=0；i您也可以使用nextElementSibling.innerHTML而不是parentNode.children[1].innerHTML。@MattWebb这是一个很好的选择，假设OP试图做的是在按钮后立即修改元素，我这么说是因为提供的代码示例说明元素中文本的更改是作为示例提供的。@AngelosChalaris确实，子元素的灵活性[n]可能更可取。@Mattweb使用此属性不需要一些父节点，但两种方法看起来都可读。对于投票失败的人，至少让我知道我的解决方案有什么问题。您也可以使用nextElementSibling.innerHTML而不是parentNode.children[1].innerHTML。@Mattweb这是一个非常好的选择，假设OP试图做的是在按钮后立即修改元素，我这么说是因为提供的代码示例说明元素中文本的更改是作为示例提供的。@AngelosChalaris确实，子元素的灵活性[n]可能更可取。@MattWebb使用此属性时不需要一些家长，但两种方法看起来都可读。对于投反对票的人，至少让我知道我的解决方案有什么问题。

<div class="parent">
  <button>Click</button>
  <div class="child">Test1</div>
  <div class="child">Test4</div>
</div>

<div class="parent">
  <button>Click</button>
  <div class="child">Test2</div>
  <div class="child">Test5</div>
</div>

var button = document.querySelectorAll("button");

for(i = 0; i < button.length; i++){
    button[i].addEventListener("click", function(){
        var parent = document.querySelectorAll(".parent");
        var child = parent.querySelector(".child:nth-child(2)");
        this.child.textContent = "success"; //just made up to show what I'm trying to accomplish
    });
}