存储目标元素的同级内部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>