Changing position of multiple DIVS with same selector in Jquery

Asked

Viewed 46 times

1

I have a page that contains several structures with the same selector, such as:

<div class="preco">
R$ 69,90
</div>

<div class="preco-a-vista">
R$ 50,00
</div>

As I mentioned, the above structure repeats several times on the page. I need to place the content of div.preco-a-vista within the div.preco

I made the following code:

$('.preco-avista').each(function() {  
  var $this = $(this);
  $('.preco').append($($this).html());
});

This code works, but it takes all prices from the page (from the price-to-view div) and puts in all div price. Repeating everything. Could you help me with this question?

javascript jquery array each

  • When you put the contents of .preco-a-vista inside .preco what happens to .preco-a-vista? gets duplicated or is to remove?

  • It is to remove Sérgio! And currently in the code is getting..

3 answers

1

I don’t quite understand your question, but...

$('.preco-a-vista').each((i,e) => { $('.preco').eq(i).html(e.textContent); })

  • It didn’t work :-| So Raphael’s idea is to basically put the div-a-vista inside the div price. The problem is that these Ivs are repeated (with the same selector) throughout the page. With the code I put above, it works, but all price-a-view DIV are inserted in all price Divs.

1

Would that be?

$('.preco-a-vista').each((i,e) => { $('.preco').eq(i).appendTo($(e).html()); })

In this case it is for equal numbers of div'.preco-a-vista' and . 'price'. There are N ways to do it. There we are moving the div.preco-a-vista into the div.preco, but keeping the text of it. If you just want to replace the content, use the append.

1

I made the function very simple and put the explanation commenting on the lines of codes. But in short:

1. Counts items with "price-to-view" class on the page;

2. Each of these elements is placed inside the element with class "price" in the same order;

3. The "price-to-view" elements are deleted

$(function(){
  //pega a quantidade de elementos
  var vista = $(".preco-a-vista");
  var qntVista = vista.length;

  //função para remover os elementos após a execução
  function removerVista(){
    $(".preco-a-vista").remove(); 
  }

  // colocar os 'preco-a-vista' dentro do 'preco'
  for (j = 0; j < qntVista; j++){
    var htmlVista = $(".preco-a-vista:eq("+j+")").html();
    $(".preco:eq("+j+")").append(htmlVista);
  }

  // executa a função de remover os 'preco-a-vista'
  removerVista();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preco">
R$ 69,90
</div>
<div class="preco-a-vista">
R$ 50,00
</div>

<div class="preco">
R$ 79,90
</div>
<div class="preco-a-vista">
R$ 60,00
</div>

<div class="preco">
R$ 89,90
</div>
<div class="preco-a-vista">
R$ 80,00
</div>

<div class="preco">
R$ 99,90
</div>
<div class="preco-a-vista">
R$ 150,00
</div>

<div class="preco">
R$ 429,90
</div>
<div class="preco-a-vista">
R$ 200,00
</div>

  • Thanks VME! It worked!

  • Thank you for helping! You can mark this answer as the answer to the question!

Browser other questions tagged javascript jquery array each

You are not signed in. Login or sign up in order to post.