如何用JS瞄准父母的兄弟姐妹?

Question

我有一个按钮，我想对它的父元素的兄弟元素进行修改。

<div class="parent">
<div class="target"></div>
<div class="child">
<button>Click!</button>
</div>
</div>

我试过玩event.target.closest和类似的，像这样，但我不能让它工作:

function clicks(event) {
const childElement = event.target.closest(".child");
const parentElement = childElement.target.closest(".parent");
const targetElement = parentElement.target.closest(".target");

targetElement.style.display = "none";
}
addEventListener('click', clicks);

意向可视化

Answer 1

您可以使用parentNode属性获取按钮的父元素，然后使用nextElementSibling属性获取目标元素:

function clicks(event) {
const parentElement = event.target.parentNode;
const targetElement = parentElement.nextElementSibling;

targetElement.style.display = "none";
}
addEventListener('click', clicks);

Answer 2

如评论部分所述，您不能使用.closest，因为它向上移动DOM树，并且您试图在对.closest的最后调用中获得父元素的子元素，一种选择是在父元素上使用querySelector，也在函数clicks的第二行上，childElement变量没有一个target属性，当设置parentElement:

时产生undefined

window.addEventListener("DOMContentLoaded", () => {
document.querySelector("button").addEventListener('click', clicks);
});
function clicks(event) {
const childElement = event.target.closest("div.child");
//const parentElement = childElement.target.closest(".parent");
const parentElement = childElement.closest("div.parent");
//Don't use .closest()
//const targetElement = parentElement.target.closest(".target");
const targetElement = parentElement.querySelector('div.target');
targetElement.style.display = "none";
//You could reduce all this to one line:
//event.target.closest('div.parent').querySelector('div.target').style.display = "none";
}

<div class="parent">
<div class="target">I am the target</div>
<div class="child">
<button>Click!</button>
</div>
</div>

文档:Element.closest

Answer 3

您可以使用两个属性- parent和preouselementsibling。

这个简单的例子找到按钮的父节点，然后找到它前面的兄弟节点:

document.querySelector('button').addEventListener('click', function() {
event.target.parentElement.previousElementSibling.classList.add('nextClicked');
});

.nextClicked {
background-color: red;
}

<div class="parent">Parent
<div class="target">Target</div>
<div class="child">Child
<button>Click!</button>
</div>
</div>