title: Jquery: Update only the next div with a specific class
body: <p>I have a form that submits a jQuery .ajax event every time  menu's value is changed. The jQuery function queries the database for the price of an product, and then updates a div with a class of ".price" with the result. There are five of these forms on the page, and each one has a div with a class of ".price"</p>
  
  <pre><code>/* Variation Price Query */
  $(".varSel").live("change", function(){
      var formdata = $(this).parents('form').serialize();
      $.ajax({
          type: "POST",
          url: "library/varPrice.php",
          data: formdata,
          success: function(html){
      $('.price').html(html);
  
        }
      });
  });
  </code></pre>
  
  <p>The problem i am having is that the function updates all of the divs with the class of ".price" and not just the next div. I have tried something like:</p>
  
  <pre><code>$(this).next('div.price').html(html);
  </code></pre>
  
  <p>But it is not returning anything.</p>
  
  <p>The following is an example of the html form:</p>
  
  <pre><code>&lt;form name='addToCart' id='addToCart7' action='cart.php?action=add' method='post'&gt;
  &lt;ul class='vars' id='varlist_p7'&gt;
      &lt;li&gt;&lt;label for="Size"&gt;Size&lt;/label&gt; 
      &lt;select id="Size" name="Size" class='varSel'&gt;
          &lt;option&gt;
              1oz
          &lt;/option&gt;
  
          &lt;option&gt;
              4oz
          &lt;/option&gt;
  
          &lt;option&gt;
              8oz
          &lt;/option&gt;
      &lt;/select&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;div class='price'&gt;
              $ 3.00
          &lt;/div&gt;
      &lt;/li&gt;
  
      &lt;li&gt;&lt;input type='submit' class='buynow' value=''&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/form&gt;
  </code></pre>