Question

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’

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

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:

$(this).next('div.price').html(html); 

But it is not returning anything.

The following is an example of the html form:

<form name='addToCart' id='addToCart7' action='cart.php?action=add' method='post'> <ul class='vars' id='varlist_p7'>     <li><label for='Size'>Size</label>      <select id='Size' name='Size' class='varSel'>         <option>             1oz         </option>          <option>             4oz         </option>          <option>             8oz         </option>     </select>     </li>      <li>         <div class='price'>             $ 3.00         </div>     </li>      <li><input type='submit' class='buynow' value=''></li> </ul> </form> 

Answer 1

since div.varSel and div.price are not siblings, you would have to go deeper than next()

$(this).parent().next('li:has(.price)').children('.price').html(html) 

should work