Change position HTML element with each (or other hint) on page load

Asked

Viewed 100 times

1

I need to access div with id list and change the position of span. It’s like this:

<div id="list">
<div class='item'>
    <span class="AB">conteudo 1</span>
    <span class="AA">conteudo 2</span>
</div>
<div class='item'>
    <span class="AB">conteudo 3</span>
    <span class="AA">conteudo 4</span>
</div>

I need you to stay like this:

<div id="list">
<div class='item'>
    <span class="AA">conteudo 2</span>
    <span class="AB">conteudo 1</span>
</div>
<div class='item'>
    <span class="AA">conteudo 4</span>
    <span class="AB">conteudo 3</span>
</div>

javascript jquery each

  • You’re interested in an answer to solve this only with CSS or you want it to be with js or jQuery yourself?

3 answers

1


Just one more way to make it on record:

$(function() {
  var cont_AA = $('.AA');
  
  $('.item').each(function(i) {
    $('.item:eq('+i+')').append(cont_AA[i]);
    $('.AB:eq('+i+')').insertAfter(cont_AA[i]);
  });

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
  <div class='item'>
    <span class="AB">conteudo 1</span>
    <span class="AA">conteudo 2</span>
  </div> <br>
  <div class='item'>
    <span class="AB">conteudo 3</span>
    <span class="AA">conteudo 4</span>
  </div>
</div>

  • I thank you all, but I ended up adapting this form to my need. Thank you!

0

See if the example below can help you.

$("button").on('click',mudarPosicao);

function mudarPosicao(){
    // pega cada elemento DIV dentro do id='list'
   $("#list > DIV").each(function(i,el){
     var pai = $(el), // elemento DIV
         filhos = pai.children(), // spans
         primeiroFilho = filhos.eq(0); // primeiro span
     pai.append( primeiroFilho ) // isso faz com que ele va para o final, ou seja o primerio agora é o segundo
   })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
<div class='item'>
    <span class="AB">conteudo 1</span>
    <span class="AA">conteudo 2</span>
</div>
<div class='item'>
    <span class="AB">conteudo 3</span>
    <span class="AA">conteudo 4</span>
</div>
</div>
<button>
Mudar posição
</button>

Tree Traversal, eq()

0

To rearrange downwards according to the numerical value of the text, you can use in addition to the .each(), the .sort(). This way, it does not matter the amount of spans in Divs:

$(function(){
   
   $("#list .item").each(function(){
      
      var $this = $(this); // div pai
   
      $("span", this).sort(function(a, b){ // seleciona os spans
         var v1 = $(a).text().match(/\d+/)[0]; // pega o valor numérico
         var v2 = $(b).text().match(/\d+/)[0]; // pega o valor numérico
         return -1; // ordem decrescente
      }).appendTo($this);
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
   <div class='item'>
       <span class="AB">conteudo 1</span>
       <span class="AB">conteudo 2</span>
   </div>
   <div class='item'>
       <span class="AB">conteudo 3</span>
       <span class="AA">conteudo 4</span>
   </div>
</div>

Browser other questions tagged javascript jquery each

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