Как настроить внешний div в javascript

Question

У меня такая ситуация:

<div id="first">
  <div>
    <p>text</p>
  </div>
</div>
<div id="second">
   <div>
      <button class="button">click</button>
   </div>
</div>
...
<div id="first"> ... </div>
<div id="second"> ... </div>
...

и так далее, структура повторяется.

Эта структура создается динамически, поэтому я не могу использовать какой-либо конкретный класс или идентификатор для первого div.

Мне нужно получить текст в первом div, когда я нажимаю кнопку во втором div.

(ПРИМЕЧАНИЕ: мне нужно чисто решение javascript, а не решение jQuery)

Спасибо

Answer 1

Предполагая, что у вас есть обработчик события для нажатия кнопки, вы можете сделать это из этого обработчика события:

function buttonClickHandler(e) {
    var first = this.parentNode.parentNode.previousSibling;
    var paragraphs = first.getElementsByTagName("p");
    var text = paragraphs[0].textContent;
}

Если у вас есть общие и известные имена классов в div, помеченных первым и вторым, вы можете сделать свой код Javascript гораздо более изолированным от изменений разметки, что, как правило, хорошая идея.

---

PS Я полагаю, вы знаете, что в вашем HTML не должно быть дублированных значений идентификаторов. Этот код не использует их, но вы должны использовать имена классов вместо значений идентификаторов, если вы собираетесь иметь дубликаты.