Looping through nested form elements

Looping through nested form elements

Hello everyone,

I've got a problem with my form and I didn't find any solution yet. The code above is supposed to loop through form elements (select, input, and textarea) that are located in <div id="step-1">. It is supposed to display "title" only, because it is inside <div id="step-1">, but it also loops through elements that are located inside <div id="step-2"> and <div id="step-3"> instead. I need your help. Here is the code:
  1. <form class="form-horizontal">
  2.     <fieldset>
  3.         <!-- Step 1 -->
  4.         <div id="step-1">
  5.             <div class="control-block">
  6.                 <label class="control-label">Title <span class="required">*</span></label>
  7.                 <div class="controls">
  8.                     <input type="text" name="title" id="title" class="input-xxlarge" />
  9.                 </div>
  10.             </div>
  11.         </div>
  12.         <!-- Step 2 -->
  13.         <div id="step-2">
  14.             <div class="control-block">
  15.                 <label class="control-label">URL <span class="required">*</span></label>
  16.                 <div class="controls">
  17.                     <input type="text" name="url" id="url" class="input-xxlarge" />
  18.                 </div>
  19.             </div>
  20.         </div>
  21.         <!-- Step 3 -->
  22.         <div id="step-3">
  23.             <div class="control-block">
  24.                 <label class="control-label">Address <span class="required">*</span></label>
  25.                 <div class="controls">
  26.                     <input type="text" name="address" id="address" class="input-xxlarge" />
  27.                 </div>
  28.             </div>
  29.         </div>
  30.         <a href="#" class="btn">Validate!</a>
  31.     </fieldset>
  32. </form>

  33. <script>
  34. $(".btn").on("click", function()
  35. {
  36.     $("div#step-1>select,input,textarea").each(function()
  37.     {
  38.         alert($(this).attr("id"));
  39.     });
  40. });
  41. </script>
I have created this sample on jsfiddle to demonstrate the problem:  http://jsfiddle.net/alex_raven/Vmxkt/3/