Заполнить скрытое поле по клику, взяв значение из другого тега в div блоке

285

26 ноября 2016, 17:58

Имеется:

<div class="listing-item">
  <h2>title</h2>
  <div class="content">
    content
  </div>
  <a class="btn" href="#" onClick="document.getElementById('IdPrimer').value = 'взять title h2 из этого блока'">Your comment</a>
</div>
<div class="listing-item">
  <h2>title</h2>
  <div class="content">
    content
  </div>
  <a class="btn" href="#" onClick="document.getElementById('IdPrimer').value = 'взять title h2 из этого блока'">Your comment</a>
</div>
<div class="listing-item">
  <h2>title</h2>
  <div class="content">
    content
  </div>
  <a class="btn" href="#" onClick="document.getElementById('IdPrimer').value = 'взять title h2 из этого блока'">Your comment</a>
</div>

Подскажите как в value заполнить title (тайтлом) из именно этого блока в котором находится ссылка с классом listing-item.

С самим заполнение поля проблем нет.

Класс одинаковый во всех блоках.

Answer 1

Ответ аналогичен этому. Используем previousElementSibling для перемещения по DOM относительно элемента a (this) на котором сработал клик.

<input id="IdPrimer" type="text"></input> 
<div class="listing-item"> 
  <h2>title1</h2> 
  <div class="content"> 
    content 
  </div> 
  <a class="btn" href="#" onClick="document.getElementById('IdPrimer').value = this.previousElementSibling.previousElementSibling.textContent; return false;">Your comment</a> 
</div> 
<div class="listing-item"> 
  <h2>title2</h2> 
  <div class="content"> 
    content 
  </div> 
  <a class="btn" href="#" onClick="document.getElementById('IdPrimer').value = this.previousElementSibling.previousElementSibling.textContent; return false;">Your comment</a> 
</div>