如何使用JavaScript query selector基于父元素选择对应子元素

问题原因 #

• 你代码里的offsetParent属性用于获取最近的设置了非static定位的祖先元素，而非当前元素的直接父元素。如果外层包裹的div没有手动设置定位，offsetParent会直接向上匹配到body甚至返回null，自然找不到对应位置的.help元素。
• 另外getElementsByClassName返回的是动态HTML集合，遍历过程中如果DOM发生变化可能出现意外问题，更推荐用querySelector匹配单个元素。

修复方案 #

根据你的DOM结构，.sample-class和对应的.help是同层级的相邻兄弟元素，有两种可靠的写法：

方法1：通过直接父元素查找对应.help #

该方法稳定性最高，即使两个元素中间插入了其他节点也不会失效：

const listVal = document.querySelectorAll('.sample-class');
listVal.forEach(el => {
  el.parentElement.querySelector('.help').innerHTML = "my dynamic content";
})

方法2：直接查找相邻下一个兄弟元素 #

如果确定两个元素是紧挨着的相邻结构，可以用这个更简洁的写法：

const listVal = document.querySelectorAll('.sample-class');
listVal.forEach(el => {
  el.nextElementSibling.innerHTML = "my dynamic content";
})

内容的提问来源于stack exchange，提问作者Manihtraa