How to loop over nested input forms with jquery
<p>I have the following html form, which is generated dynamically:</p>

<pre><code>&lt;ul class="precursorList"&gt;
&lt;li&gt;
Precursor Name: &lt;input name="precursorName" type="text"&gt;
    &lt;ul class="portList"&gt;
      &lt;li&gt;Portname of precursor: &lt;input name="precursorPort"  type="text"&gt;
          Portname of this: &lt;input name="thisPort"  type="text"&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;       
&lt;li&gt;
Precursor Name: &lt;input name="precursorName"  type="text"&gt;
    &lt;ul class="portList"&gt;
      &lt;li&gt;Portname of precursor: &lt;input name="precursorPort"  type="text"&gt;
          Portname of this: &lt;input name="thisPort"  type="text"&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;   
&lt;/ul&gt;
</code></pre>

<p>I want to get the values using jquery, therefore I have defined this loop:</p>

<pre><code>ports = [];

$(".precursorList :input").each(function() {
    if(this.name == "precursorName") {
        var precursorName_ = this.value
        $(".portList :input ").each(function() {
            if(this.name == "precursorPort") {
                precursorPort_ = this.value;
            } else if(this.name == "thisPort") {
                ports.push({
                    filterName : precursorName_,
                    portNameOfFilter : precursorPort_,
                    portNameOfThis : this.value
                });
            }
        });
    }
});
</code></pre>

<p>Unfortunately this function does not work like I want it to work. The following loop <code>$(".portList :input ").each(</code> will always only loop over all elements in portList in the html document. How can I achieve that this loop will only loop over the corresponding portList, for each precursor? </p>

<p><strong>UPDATE:</strong> The structure of the html element will stay the same only, the number of inputs will change. But there will only be a portList if a PrecursorElement exist.</p>
