Jquery get each div's sub child divs and grab info into an array

Question

I have a some html that looks like this

<div id="main">
  <div id="sub_main_1" class="sub_main">
      <input type="text" class="sub_name_first" /><br />
      <input type="text" class="sub_name_second" /><br />
  </div>
  <div id="sub_main_2" class="sub_main">
      <input type="text" class="sub_name_first" /><br />
      <input type="text" class="sub_name_second" /><br />
  </div>
</div>

I would like to pull out each sub_main divs information into an array in javascript. So far I have this as my jquery code

$('#main').find('.sub_main').each( 
          function() { 
               alert('hi'); 
          });

The alert is just a test that it should show "hi" twice. But this is not working. I am also not clear on how I can store the two inputs in a javascript array. Any help would be great! Thanks,

Answer 1

var array = $('#main input').map(function() {
    return $(this).val();
}).get();

---

EDIT:

Note that this will return the values of all input elements under #main. You can make the $('#main input') selector as specific as you need if not all input elements are desired.

Answer 2

var info = $("#main .sub_main input:text").map(function() {
    return $(this).val();
}).get(); // get() converts resulting collection into array

http://api.jquery.com/map/