title: jquery - DOM traversal question
body: <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>