Ajaxリクエストが複数回呼び出されているときにデータをHTMLに更新する方法

Question

複数のショップの詳細がリストされたページがあります。ショップごとに、商品の詳細を取得するためのAjaxコールが行われています。各ショップのための

function init_product_data(shop_id) { 

     var uri = parseUri(location.href); 
     var qs_product = uri.queryKey; 
     qs_product.device  = "desktop"; 
     qs_product.shop_id  = shop_id; 
     qs_product.rows = 3; 

     $.ajax({ 
     url: search_ajax_product_url_v3, 
     type: "GET", 
     data: (qs_product), 
     dataType: "json", 
     timeout: 5000, 
     success: function(result){ 
      // $('#official-product_detail').html(''); 

      $('.official-product_detail').html(buildMicroBrandProductHtml(result)); 


      }, 
      complete: function() { 

      }, 
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
      } 
     }); 

} 

コールinit_prod_data：

for (var i=0; i<n; i++){ 
     init_product_data(result[i].shop_id); 
} 

HTML：

<div class="grid-shop-product pull-right"> 
      <div class="official-product_detail"> 
      </div> 
</div> 

問題は、最後のAJAX呼び出し結果の製品の詳細は、すべてのお店のために更新されているということです。結果を受け取ったら、各店舗の製品詳細をどのように更新することができますか？ 例：

<div class="grid-shop-product pull-right"> 
       <div class="official-product_detail"> 
       <!-- Products of Shop1--> 
       </div> 
    </div> 
    <div class="grid-shop-product pull-right"> 
       <div class="official-product_detail"> 
       <!-- Products of Shop2--> 
       </div> 
    </div> 
    . 
    . 
    . 
    <div class="grid-shop-product pull-right"> 
       <div class="official-product_detail"> 
       <!-- Products of ShopN--> 
       </div> 
    </div> 

Answer 1

は基本的に、あなたはそれぞれのdivをループしており、その後、現在のdivだけAJAX結果とdata.Youが、私は各.official-product_detailを横断し、としてそれを渡していたのコードを、次の試みることができることを更新パラメータをさらにajaxを呼び出す関数に渡し、同じコントロールのみを結果データでレンダリングします。

$(".official-product_detail").each(function(){ 
    init_product_data(shop_id,$(this)); 
}); 

function init_product_data(shop_id,control) { 
     var cn = control; //YOU CAN FIND THE CONTROL IF ITS DEEP INSIDE 
     var uri = parseUri(location.href); 
     var qs_product = uri.queryKey; 
     qs_product.device  = "desktop"; 
     qs_product.shop_id  = shop_id; 
     qs_product.rows = 3; 

     $.ajax({ 
     url: search_ajax_product_url_v3, 
     type: "GET", 
     data: (qs_product), 
     dataType: "json", 
     timeout: 5000, 
     success: function(result){ 
      // $('#official-product_detail').html(''); 

      cn.html(buildMicroBrandProductHtml(result)); 


      }, 
      complete: function() { 

      }, 
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
      } 
     }); 

}