Javascript - replace elements with same class with different values

Question

Quick one: Is it possible to replace the values of elements with the SAME class with different values?

Here's what I mean: I have this array returned by an AJAX response:

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

The above array is generated from a html response that looks like this:

    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>

From the above, trouble kicks in on the last line of the code: $('.gdlr-tail').html(num_price); where it renders all the values in my .gdlr-tail class to be the value of the first span i.e all the values in the class are set to 126(63*2). This happens though my array is inside a loop. Only the first element is calculated with all the other elements being set to the value of this calculation.

Where could i be going wrong?

You have to iterate through $('.gdlr-tail') too. That's why only the first element is updated. I suggest you use a for and use the index to address the elements on both arrays. — Eddie
– Eddie, Commented Oct 18, 2016 at 11:09

Ori Drori · Accepted Answer · 2016-10-18 11:09:34Z

1

Iterate the .gdlr-tail elements, and not the prices. Then assign to each element the corresponding value from the array:

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>

answered Oct 18, 2016 at 11:09

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eddie Over a year ago

Elegant and concise, should be marked as the answer in my opinion

suo Over a year ago

beautiful. twice you've saved my bacon. thanks. should note the other answers are also correct

Emil S. Jørgensen · Accepted Answer · 2016-10-18 11:10:35Z

It is, but for sanity it's always best to group them first to avoid unwanted changes elsewhere on the page:

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>

Keith · Accepted Answer · 2016-10-18 11:13:02Z

1

I assume your after something like this->

With the reformatting too. ?

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>

answered Oct 18, 2016 at 11:13

Keith

24.4k2 gold badges32 silver badges48 bronze badges

Collectives™ on Stack Overflow

Javascript - replace elements with same class with different values

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related