Javascript - 同じクラスの要素を異なる値に置き換えます。

Question

クイックワン：SAMEクラスの値を異なる値に置き換えることは可能ですか？ここで

は私の意味は次のとおりです。私は、この配列は、AJAX応答で返されています：

var result = [ 
 
     "$63.00/Night", 
 
     "$68.00/Night", 
 
     "$58.00/Night", 
 
     "$50.00/Night" 
 
    ]; 
 
    
 
    console.log(result[0]); 
 
    \t \t \t \t \t \t \t \t 
 
    result.forEach(function(item) 
 
    { 
 
    \t var num_price = parseFloat(item.replace(/[^\d\.]*/g, '')); 
 
    \t num_price = num_price * 2; 
 
    \t console.log(num_price); 
 
    \t  \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
    \t $('.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>

：

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

上記の配列は次のようになりますHTML応答から生成されます

コードの最後の行に問題があります：$('.gdlr-tail').html(num_price);すべての値をレンダリングします最初のスパンの値、すなわちクラス内のすべての値が126(63*2)に設定されています。これは私の配列がループ内にあるにもかかわらず起こります。最初の要素のみが計算され、他のすべての要素はこの計算の値に設定されます。

どこが間違っていますか？

Answer 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>

Answer 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>

Answer 3

私のようなものの後にあなたを取りますthis->

再フォーマットもあります。 ？

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>