Question

I have html that looks like this with several items

<div class="item">
    <p class="price">$388.00</p>
         <p class="part_number">VM2327T23A00T</p>
         <p class="real_price"></p>
      </div>
      <div class="item">
    <p class="price">$88.00</p>
         <p class="part_number">AA327T23A00T</p>
         <p class="real_price"></p>
      </div>
      <div class="item">
      <p class="price">$38.00</p>
         <p class="part_number">AA327T23A00T</p>
         <p class="real_price"></p>
      </div>

etc..

I am trying to iterate through each item and set its “real_price” to a value here is my code:

  jQuery('.part_number').each(function () {
                    parts.push(SearchSpring.jQuery(this).text());

                    SearchSpring.jQuery.ajax(
            {
                type: "POST",
                url: "RealTimePricing.aspx/TestInteraction",
                data: "{param1:'brit', param2: 'nick'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                cache: false,
                success: function (msg) {                 
                   jQuery("#real_price").html(msg.d);

                }
            }
        );
      });

                }

I am getting the correct “msg” on success (I can see this in firebug) but it never sets the html, also it only iterates through the each 1 time..

I am not sure why this isnt setting the html

  jQuery("#real_price").html(msg.d);

And why is my code not looping through all the “.part_number” tags in the html?

Answer 1

class="real_price" implies .real_price, but you have to make sure you’re updating the correct element as well (there are several elements with that class). I suggest using .next as the element to update is next to each .part_number element:

jQuery(".part_number").each(function() {
   var $elem = jQuery(this).next(".real_price");

and then:

$elem.html(msg.d);