JQuery: update only the next range with a specific class

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

I tried this way, but did not have time.

"onchange" is working fine. I just need help to display the value inside the span tag as content.

Any help?

Answer 1

@samccone was on the right track, but it doesn’t work for you because span.price is not the next element after select the # parts element (which I assume is the element you send to the load_part_price_select function).

This is one of the siblings , so try the following:

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

Or try nextAll :

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

, " " , , 'this'. , "nextAll".

ajax- samcone:

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

Answer 2

$(this).next("span.price").html(responseData);