Jquery:仅更新具有特定类的下一个跨度

Question

html:

<p class="fields">
  <select id="parts">
    <option value="10">Ring</option>
    <option value="50">Necklace</option>
    <option value="3">Pendant</option>
  </select>
  <label for="price">Price</label>
  <span class="price"></span>
</p>


function load_part_price_select(id, value) {
$('#' + id ).live('change',function() {
    $.ajax({
      url: '/parts/' + value + '/price',
      type: 'get',
              context: this,
      dataType: 'script',
      success: function(responseData) {
        $(this).next("span.price").html(responseData);
      }
    }); 
});
};

我已经尝试过这种方法，但没有成功。

“onchange”工作正常，我只需要一些帮助来将 span 标记内的值显示为内容。

有什么帮助吗？

Answer 1

@samccone 走在正确的轨道上，但它不适合你，因为 span.price 不是 next select#parts 元素之后的元素(我假设是您发送到 load_part_price_select 函数的元素)。

它是 siblings 之一不过，所以试试这个:

$(this).siblings("span.price:first").html(responseData);

或者尝试nextAll :

$(this).nextAll("span.price:first").html(responseData);

我假设“siblings”效率更高，因为它不关心匹配的元素是在“this”元素之前还是之后。但如果您不想匹配以前的范围，请使用“nextAll”。

然后根据 samccone 的评论设置 ajax 上下文:

function load_part_price_select(id, value) {
$('#' + id ).live('change',function() {
    $.ajax({
      url: '/parts/' + value + '/price',
      type: 'get',
      context: this,
      dataType: 'script',
      success: function(responseData) {
        $(this).nextAll("span.price:first").html(responseData);
      }
    }); 
});
};