Javascript - 用不同的值替换具有相同类的元素答案

【问题标题】：Javascript - replace elements with same class with different valuesJavascript - 用不同的值替换具有相同类的元素
【发布时间】：2017-02-27 14:59:28
【问题描述】：

快速一：是否可以将元素的值替换为具有不同值的 SAME 类？

我的意思是：我有这个由 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)。尽管我的数组在循环内，但会发生这种情况。仅计算第一个元素，所有其他元素都设置为此计算的值。

我哪里出错了？

【问题讨论】：

您也必须遍历$('.gdlr-tail')。这就是为什么只更新第一个元素。我建议您使用for 并使用索引来处理两个数组上的元素。

标签： javascript html arrays ajax

【解决方案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>

【讨论】：

优雅简洁，我认为应该标记为答案
漂亮。两次你救了我的培根。谢谢。应该注意其他答案也是正确的

【解决方案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>

【讨论】：