Jquery: Mettre à jour uniquement la prochaine div avec une classe spécifique

Question

J'ai un formulaire qui soumet un événement jQuery .ajax chaque fois que la valeur du menu est modifiée. La fonction jQuery interroge la base de données pour le prix d'un produit, puis met à jour un div avec une classe de "prix" avec le résultat. Il y a cinq de ces formes sur la page, et chacun a une div avec une classe de « .prix »

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

     } 
    }); 
}); 

Le problème que j'ai est que la fonction met à jour toutes les divs avec la classe de " "prix" et pas seulement la prochaine div. J'ai essayé quelque chose comme:

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

Mais il ne retourne rien.

Voici un exemple de la forme html:

<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

depuis div.varSel et div.price ne sont pas frères et sœurs, vous devez aller plus loin que la prochaine()

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

devrait fonctionner