How to use Jquery to get array of UL LI and input?
<p>I have five ul lists that I am using and each list might have an input in it.</p>

<p>Here is an example:</p>

<pre><code>&lt;form id="testForm"&gt;
&lt;ul id="1"&gt;
     &lt;li&gt;TEST&lt;/li&gt;
     &lt;li&gt;Gender: 
          &lt;select id="gender" name="gender"&gt;
               &lt;option value="0"&gt;Male&lt;/option&gt;
               &lt;option value="2"&gt;Female&lt;/option&gt;
          &lt;/select&gt;
     &lt;/li&gt;
&lt;/ul&gt;
&lt;ul id="2"&gt;
     &lt;li&gt;TEST2&lt;/li&gt;
     &lt;li&gt;Gender2: 
          &lt;select id="gender2" name="gender"&gt;
               &lt;option value="0"&gt;Male&lt;/option&gt;
               &lt;option value="2"&gt;Female&lt;/option&gt;
          &lt;/select&gt;
     &lt;/li&gt;
&lt;/ul&gt;
&lt;/form&gt;
</code></pre>

<p>What I am trying to do is get an array of the li text and if there is an input get the selected value of it.</p>

<p>With jquery I have tried this:</p>

<pre><code>$('#testForm').submit(function() {
     var optionTexts = [];
     for (i = 1; i &lt; 2; i++) {
          $("#"+i).each(function() { optionTexts.push($(this).text()) });
     }
     alert(optionTexts);
     return false;
});
</code></pre>

<p>Now the problem that I am having is it gives me a list of all the UL LI but it is also giving all the options not the selected option. How would I go about doing this?</p>

<p><strong>Edit</strong></p>

<p>I forgot to add the output that I am looking for. I want an output like this:</p>

<pre><code>[1, TEST1, gender =&gt; male]
[2, TEST2, gender =&gt; female]
</code></pre>
