Javascript - замена элементов одним и тем же классом с разными значениями

#javascript #html #arrays #ajax

#javascript #HTML #массивы #ajax

Вопрос:

Быстрый вопрос: можно ли заменить значения элементов одним и тем ЖЕ классом с разными значениями?

Вот что я имею в виду: у меня есть этот массив, возвращенный ответом AJAX:

 [
  "$63.00 / Night",
  "$68.00 / Night",
  "$58.00 / Night",
  "$50.00 / Night"
]

Приведенный выше массив генерируется из ответа html, который выглядит следующим образом:

     var result = [
      "$63.00 / Night",
      "$68.00 / Night",
      "$58.00 / Night",
      "$50.00 / Night"
    ];
    
    console.log(result[0]);
    								
    result.forEach(function(item)
    {
    	var num_price = parseFloat(item.replace( /[^d.]*/g, ''));
    	num_price = num_price * 2;
    	console.log(num_price);
    	   																		
    	$('.gdlr-tail').html(num_price);
    });

 <span class="gdlr-tail">$63.00 / Night</span>
<span class="gdlr-tail">$65.00 / Night</span>
<span class="gdlr-tail">$67.00 / Night</span>
<span class="gdlr-tail">$72.00 / Night</span>

Из вышесказанного проблема возникает в последней строке кода: $('.gdlr-tail').html(num_price); где все значения в моем .gdlr-tail классе отображаются как значение первого диапазона, т.е. Все значения в классе устанавливаются 126(63*2) равными. Это происходит, хотя мой массив находится внутри цикла. Вычисляется только первый элемент, а для всех остальных элементов устанавливается значение этого вычисления.

Где я мог ошибиться?

1. Вам тоже нужно выполнить итерацию $('.gdlr-tail') . Вот почему обновляется только первый элемент. Я предлагаю вам использовать a for и использовать индекс для адресации элементов в обоих массивах.

Ответ №1:

Повторяйте .gdlr-tail элементы, а не цены. Затем присвоите каждому элементу соответствующее значение из массива:

 var result = [
  "$63.00 / Night",
  "$68.00 / Night",
  "$58.00 / Night",
  "$50.00 / Night"
];

$('.gdlr-tail').each(function(index, el)
{
    var num_price = parseFloat(result[index].replace( /[^d.]*/g, ''));
    num_price = num_price * 2;

    $(el).html(num_price);
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="gdlr-tail">$63.00 / Night</span>
<span class="gdlr-tail">$65.00 / Night</span>
<span class="gdlr-tail">$67.00 / Night</span>
<span class="gdlr-tail">$72.00 / Night</span>

1. Элегантный и лаконичный, на мой взгляд, должен быть отмечен как ответ

2. Красивые. дважды вы спасли мой бекон. Спасибо. следует отметить, что другие ответы также верны

Ответ №2:

Это так, но для здравомыслия всегда лучше сначала сгруппировать их, чтобы избежать нежелательных изменений в другом месте страницы:

 var result = [
  "$63.00 / Night",
  "$68.00 / Night",
  "$58.00 / Night",
  "$50.00 / Night"
];

result.forEach(function(item, index) {

  var num_price = parseFloat(item.replace(/[^d.]*/g, ''));
  num_price = num_price * 2;
  console.log(num_price);

  $('.gdlr-tail-parent .gdlr-tail:nth-child('   (index   1)   ')').html(num_price);

});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gdlr-tail-parent">
  <span class="gdlr-tail">$63.00 / Night</span>
  <span class="gdlr-tail">$65.00 / Night</span>
  <span class="gdlr-tail">$67.00 / Night</span>
  <span class="gdlr-tail">$72.00 / Night</span>
</div>

Ответ №3:

Я предполагаю, что после чего-то подобного->

С переформатированием тоже. ?

 var result = [
  "$63.00 / Night",
  "$68.00 / Night",
  "$58.00 / Night",
  "$50.00 / Night"
];

var tails = $('.gdlr-tail');
result.forEach(function(item, index)
{
  var num_price = parseFloat(item.replace( /[^d.]*/g, ''));
  num_price = num_price * 2;  
  $(tails[index]).text("$"   num_price.toFixed(2)   " / Night");  
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="gdlr-tail">$63.00 / Night</span>
<span class="gdlr-tail">$65.00 / Night</span>
<span class="gdlr-tail">$67.00 / Night</span>
<span class="gdlr-tail">$72.00 / Night</span>