jQuery-单击以将父元素复制到文本字段

Question

I want 4 buttons next to each URL, you can then click on a button to copy the parent url to the buttons respective textfield.

I presume that it is easiest to do this using jquery but I have no clue where to start. Any advice would be much appreciated!

http://jsfiddle.net/WwdMw/

<div class="selection">
  <div class"url">
    <h2>example1.com</h2>
  </div>
  <button type="button" class="btn_opt1">Copy to Option1</button>
  <button type="button" class="btn_opt2">Copy to Option2</button>
  <button type="button" class="btn_opt3">Copy to Option3</button>
  <button type="button" class="btn_opt4">Copy to Option4</button>
</div>
<hr/>
<div class="selection">
  <div class"url">
    <h2>example3.com</h2>
  </div>
  <button type="button" class="btn_opt1">Copy to Option1</button>
  <button type="button" class="btn_opt2">Copy to Option2</button>
  <button type="button" class="btn_opt3">Copy to Option3</button>
  <button type="button" class="btn_opt4">Copy to Option4</button>
</div>
<hr/>

<div class="selection">
  <div class"url">
    <h2>example2.com</h2>
  </div>
  <button type="button" class="btn_opt1">Copy to Option1</button>
  <button type="button" class="btn_opt2">Copy to Option2</button>
  <button type="button" class="btn_opt3">Copy to Option3</button>
  <button type="button" class="btn_opt4">Copy to Option4</button>
</div>

<hr/>

Answer 1

Have it.

$('button').click(function () {
    var value = $(this).parent().find('h2').text();
    var idIdentifier = $(this).text().substr($(this).text().length - 1);
    var textArea = $('div[class*='+idIdentifier+']').find('textarea');
    textArea.val(textArea.val() +" "+ value);
})

Live Demo