jquery - DOM traversal question
<p>Basically what I have here is a button that adds a new list item to an unordered list. Within this list item is a dropdown box (.formSelector) that when changed triggers an ajax call to get the values for another dropdown box (.fieldSelector) in the same list item.</p>

<p>The problem is on this line:</p>

<pre><code>$(this).closest(".fieldSelector").append(
</code></pre>

<p>If I change it to</p>

<pre><code>$(".fieldSelector").append(
</code></pre>

<p>the second box updates correctly. The problem with this is that when I have multiple list items it updates every dropdown box on the page with the class fieldSelector, which is undesirable. How can I traverse the DOM to just pick the fieldSelector in the current list item? Any help is greatly appreciated.</p>

<p>Complete code:</p>

<pre><code>$("button", "#newReportElement").click(function() { 
        $("#reportElements").append("&lt;li class=\"ui-state-default\"&gt; &lt;span class=\"test ui-icon ui-icon-arrowthick-2-n-s \"&gt;&lt;/span&gt;&lt;span class=\"ui-icon ui-icon-trash deleteRange \"&gt;&lt;/span&gt; &lt;select name=\"form[]\" class=\"formSelector\"&gt;&lt;? foreach ($forms-&gt;result() as $row) { echo "&lt;option value='$row-&gt;formId'&gt;$row-&gt;name&lt;/option&gt;"; }?&gt;&lt;/select&gt;&lt;select class=\"fieldSelector\" name=\"field[]\"&gt;&lt;/select&gt;&lt;/li&gt;");                                   
        $(".deleteRange").button(); 
        $('.formSelector').change(function() { 
            var id = $(this).val();     
            var url = "&lt;? echo site_url("report/formfields");?&gt;" + "/" + id;   
            var atext = "ids:"; 

            $.getJSON(url,
                function(data){
                  $.each(data.items, function(i,item){

                    $(this).closest(".fieldSelector").append(
                            $('&lt;option&gt;&lt;/option&gt;').val(item.formId).html(item.formLabel)
                        );
                  });
                });    

        });
        return false; 
    });
</code></pre>
