存储目标元素兄弟的内部 html

Question

我有一个代码，但我无法让它工作。 一个目标出现在一个元素上，我必须找到它的下一个兄弟，或者我可以转到它的父元素，然后使用 queryselector 搜索兄弟的类。

如果我将 ** 行 ** 替换为查询选择器，代码就可以完美运行，所以问题在于兄弟方法 100%。

你知道我做错了什么吗？

/*we put on event listener for each "refsz" class*/
var elements = document.getElementsByClassName("refsz");

for (var z = 0; z < elements.length; z++) {
    elements[z].addEventListener('click', callThis, false);
}

/*and when the event occurs, I select the sibling div's innerHTML and change
"success" div's innerHTML to this*/

function callThis() {

**var temp= event.target.nextSibling.innerHTML;**
document.querySelector("#success").innerHTML = temp;
}

<div class="parent">

<div> class="refsz"> I will click this </div>
<div> class="sibling"> I need the innerHTML of this sibling</div>

</div>

<div id="success"></div>

Answer 1

您宁愿调用函数nextElementSibling 而不是nextSibling。

W3schools的解释：

nextElementSibling 属性返回紧跟在指定元素之后的元素，在同一树级别。

该属性与nextSibling的区别在于，nextSibling将下一个兄弟节点作为元素节点、文本节点或注释节点返回，而nextElementSibling将下一个兄弟节点作为元素节点返回（忽略文本和注释节点） .

更多here.

来自MDN的解释：

NonDocumentTypeChildNode.nextElementSibling 只读属性返回其父子列表中紧跟指定元素的元素，如果指定元素是列表中的最后一个元素，则返回 null。

更多here.

您还可以详细了解nextSibling 和nextElementSibling here 之间的区别。

---

其他错误：

• 您的 div 没有在其标签中包含 class 属性
• 在函数callThis() 内部，您应该调用this.nextElementSibling 而不是this.event.nextSibling
• 您也可以使用document.getElementById("success") 代替document.querySelector("#success")，因为您知道元素的ID

---

这是更正后的代码：

/*we put on event listener for each "refsz" class*/
var elements = document.getElementsByClassName("refsz");

for(var z=0; z < elements.length; z++) {
  elements[z].addEventListener('click', callThis, false);
}

/*and when the event occurs, I select the sibling div's innerHTML and change
"success" div's innerHTML to this*/

function callThis() {
  var temp= this.nextElementSibling.innerHTML;
  document.getElementById("success").innerHTML = temp;
}

<div class="parent">
  <div class="refsz"> I will click this </div>
  <div class="sibling"> I need the innerHTML of this sibling</div>
</div>

<div id="success"></div>