Jquery：仅使用特定类更新下一个 div

Question

我有一个表单，每次更改菜单的值时都会提交一个 jQuery .ajax 事件。 jQuery 函数在数据库中查询产品的价格，然后用结果更新一个带有“.price”类的 div。页面上有五个这样的表单，每个表单都有一个 div 类为“.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);

      }
    });
});

我遇到的问题是该函数使用“.price”类更新所有 div，而不仅仅是下一个 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 不是兄弟，你必须比 next() 更深入

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

应该工作