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

Как: [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]);
0
Omar Gonzales 12 Апр 2019 в 20:38

2 ответа

Лучший ответ

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

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>
1
Taplar 12 Апр 2019 в 17:44

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

// 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);
  }
});
1
Dimman 12 Апр 2019 в 18:11