Question

I have the following html form, which is generated dynamically:

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

I want to get the values using jquery, therefore I have defined this loop:

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
                });
            }
        });
    }
});

Unfortunately this function does not work like I want it to work. The following loop $(".portList :input ").each( 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?

UPDATE: 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.

Answer 1

id must be a unique field, instead use class to select multiple elements. Also use .live() for dynamically added elements.
EDIT:
If you are using Jquery > 1.7 use .on() instead of .live().
I tried following and it seems that its working

   $(".precursorPort").each(function() {
        temp = this.name;
        $(this).parents(".portList").each(function() {
            $(this).parents(".precursorList").each(function() {
                alert(temp);
                // use temp var and save it in ports
            });
        });
    });

Check this fiddle : http://jsfiddle.net/Ajinkya_Parakh/DR233/
It may not be the best/most efficient but it is one of the working alternative.