Javascript-форум - Placehilder для полей

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Placehilder для полей (https://javascript.ru/forum/dom-window/47635-placehilder-dlya-polejj.html)

Placehilder для полей

Добрый день.
Имеется такая форма:

<form action="" method="post" class="mpf">
	<div class="wa-form">
        <div class="wa-field wa-field-firstname wa-required">
            <div class="wa-name">Имя</div>
            <div class="wa-value"><input type="text" name="customer[firstname]" value=""></div>
        </div>
        <div class="wa-field wa-field-lastname wa-required">
            <div class="wa-name">Фамилия</div>
            <div class="wa-value"><input type="text" name="customer[lastname]" value=""></div>
        </div>
        <div class="wa-field wa-field-phone wa-required">
            <div class="wa-name">Телефон</div>
            <div class="wa-value"><p><input type="text" name="customer[phone]" value=""></p></div>
        </div>
        <div class="wa-field wa-field-email wa-required">
            <div class="wa-name">Email</div>
            <div class="wa-value"><p><input type="text" name="customer[email]" value="totalshiva@gmail.com"></p></div>
        </div>
        <div class="wa-field wa-field-company wa-required">
            <div class="wa-name">Официальное название организации</div>
            <div class="wa-value"><input type="text" name="customer[company]" value=""></div>
        </div>
	</div>
</form>

Мне необходимо скрыть названия полей, в слое "wa-name" (с этим проблем нет) и каждому полю присвоить Placeholder, соответственно названия поля в слое "wa-name"

Я смог это реализовать только при клике на поле, а при загрузке страницы - не смог т.к. не могу привязаться к $(this).

$(document).ready(function() {
					$("div.wa-name").click(function() {
					var nm = $(this).html();
					$(this).parent().find("input").attr("placeholder", nm) 
					})
				})

Вот так - работает при клике. Каждому полю вставляет то, что надо.
А при загрузке не знаю как перебрать все поля в этом блоке и каждому присвоить соответствующую надпись.

Подскажите пожалуйста как.

Спасибо

Pashok,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  	$(function ()
  	  {
  	    $('.wa-field').each(function()
  	      {
  	        $('input', this).attr("placeholder", $('.wa-name', this).html())
  	      }
  	    );
  	  }
  	)
  </script>
</head>

<body>
<form action="" method="post" class="mpf">
	<div class="wa-form">
        <div class="wa-field wa-field-firstname wa-required">
            <div class="wa-name">Имя</div>
            <div class="wa-value"><input type="text" name="customer[firstname]" value=""></div>
        </div>
        <div class="wa-field wa-field-lastname wa-required">
            <div class="wa-name">Фамилия</div>
            <div class="wa-value"><input type="text" name="customer[lastname]" value=""></div>
        </div>
        <div class="wa-field wa-field-phone wa-required">
            <div class="wa-name">Телефон</div>
            <div class="wa-value"><p><input type="text" name="customer[phone]" value=""></p></div>
        </div>
        <div class="wa-field wa-field-email wa-required">
            <div class="wa-name">Email</div>
            <div class="wa-value"><p><input type="text" name="customer[email]" value=""></p></div>
        </div>
        <div class="wa-field wa-field-company wa-required">
            <div class="wa-name">Официальное название организации</div>
            <div class="wa-value"><input type="text" name="customer[company]" value=""></div>
        </div>
	</div>
</form>

</body>

</html>

Спасибо
получилось