Jquery：特定のクラスの次のdivのみを更新する

Question

メニューの値が変更されるたびにjQuery .ajaxイベントを送信するフォームがあります。 jQuery関数は、データベースに製品の価格を問い合わせ、その結果を「.price」のクラスでdivを更新します。そここれらの形態の5は、ページ上にあり、それぞれが

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

     } 
    }); 
}); 

を「.price」のクラスを持つdiv要素を持っている私が午前問題は、関数が "のクラスとdiv要素のすべてを更新していることです.price "だけでなく、次のdiv。私は次のようなものを試しました：

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

しかし何も返されていません。

次は、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

div.varSelとdiv.priceは兄弟ではないので、あなたは（次回より深く行かなければならないだろう）

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