Блог

Из бэкэнда я отправляю список цен.

Нравится: [70, 90, 100, 140, 200]

У меня также есть <span> элементы с определенными классами внутри div:

 <span class="price_50_units"></span>
<span class="price_100_units"></span>
<span class="price_200_units"></span>
<span class="price_300_units"></span>
<span class="price_500_units"></span>
  

Мне нужно добавить эти элементы к его определенному диапазону. Первый элемент списка всегда будет соответствовать диапазону с class="price_50_units" :

 <span class="price_50_units">70</span> #should be the result for the first span.
  

Второй элемент всегда будет соответствовать диапазону с class="price_100_units" и так далее.

 <span class="price_100_units">90</span> #should be the result for the second span.
  

Прямо сейчас я могу поместить элементы span со значениями списка внутри div с помощью этого кода:

 req.done(function (response) {
     $('#prices').empty();
     var prices = response.prices;
     var list = '';
     for (var j = 0; j < prices.length; j  ) {
         list  = "<span>"   prices[j]   "</span></br>";
         }
     $('#prices').html(list);

    });
  

Этот код создаст новые элементы span со значениями из списка.

Но как настроить таргетинг на элементы span, уже присутствующие в html?

Я думал о чем-то подобном, но не работает:

  $('p').children('span .price_50_units').text(prices[1]);
  

Если индекс ответа и индекс диапазона имеют прямую корреляцию, то вы можете поместить общий класс в span и просто установить их тексты на основе индекса.

 var responseData = [70, 90, 100, 140, 200];

$('.price').text(function(index){
  return responseData[index];
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="price price_50_units"></span>
<span class="price price_100_units"></span>
<span class="price price_200_units"></span>
<span class="price price_300_units"></span>
<span class="price price_500_units"></span>  

Если ваши интервалы не всегда создаются по порядку, то, возможно:

 // Your data
var respData = [70, 90, 100, 140, 200];
// Loop through
$.each(respData, function(index, value ) {
  // Check if element exists. PS change selector if needed
  if($('span.price_'   value   '_units').length) {
    // add the value to the span
    $('span.price_'   value   '_units').text(value);
  }
});