Сохраните внутреннюю html родного элемента целевого элемента

Question

У меня есть код, и я просто не могу заставить его работать. Цель встречается с элементом, и я должен найти его следующего родного брата, или я мог бы go его родителю, а затем искать класс родного брата с помощью 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 возвращает следующий узел в качестве узла элемента (игнорирует узлы текста и комментариев).

Подробнее здесь .

Объяснение из MDN :

Свойство NonDocumentTypeChildNode.nextElementSibling, доступное только для чтения, возвращает элемент, следующий сразу за указанным в списке дочерних элементов его родителя, или ноль, если указанный элемент является последним в списке.

Подробнее здесь .

Вы также можете узнать больше о различиях между nextSibling и nextElementSibling ч ere .

---

Другие ошибки:

• Ваши div не включили атрибут class в свои теги
• Inside функции callThis() вы должны вызвать this.nextElementSibling вместо this.event.nextSibling
• , вы также можете использовать document.getElementById("success") вместо document.querySelector("#success"), так как вы знаете идентификатор элемента

---

Вот исправленный код:

/*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>