Change the position of a <li> to the first position

Asked

Viewed 613 times

3

I have the following <ul>:

  <ul class="opcoes">
     <li id="">Escolha a opção abaixo</li>
     <li id="1">1</li>
     <li id="2">1</li>
     <li id="3">3</li>
  </ul>

Has as change position of a <li> to the first position of <ul> in jQuery when clicking on the given <li>?

javascript jquery css

4 answers

5


Basically

$('li').click(function(){ $($(this).closest('ul')).prepend($(this)); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="opcoes">
     <li id="">Escolha a opção abaixo</li>
     <li id="1">1</li>
     <li id="2">1</li>
     <li id="3">3</li>
  </ul>

  • that’s right, thank you.

4

I created an example based on what I understood about your inquiry, see if the code below matches your need.

$(document).ready(function(){
  let opcoes = $('.opcoes');
  let opcoesItems = opcoes.find('li');
  
  opcoesItems.each(function(i){
  	$(this).click(function(e){
    	opcoes.prepend($(this));
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Selecione uma opção</h2>

<ul class="opcoes">
  <li id="1">1</li>
  <li id="2">1</li>
  <li id="3">3</li>
</ul>

I had to adapt your HTML code to make the logic work properly.

3

This has an effect on the transition

$(document).ready(function() {
$('li').click(function() {
  // the clicked LI
  var clicked = $(this);

  // all the LIs above the clicked one
  var previousAll = clicked.prevAll();

  // only proceed if it's not already on top (no previous siblings)
  if(previousAll.length > 0) {
    // top LI
    var top = $(previousAll[previousAll.length - 1]);

    // immediately previous LI
    var previous = $(previousAll[0]);

    // how far up do we need to move the clicked LI?
    var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');

    // how far down do we need to move the previous siblings?
    var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());

    // let's move stuff
    clicked.css('position', 'relative');
    previousAll.css('position', 'relative');
    clicked.animate({'top': -moveUp});
    previousAll.animate({'top': moveDown}, {complete: function() {
      // rearrange the DOM and restore positioning when we're done moving
      clicked.parent().prepend(clicked);
      clicked.css({'position': 'static', 'top': 0});
      previousAll.css({'position': 'static', 'top': 0}); 
    }});
  }
});
  });
a,a:hover{text-decoration:none;}
ul{list-style:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>Escolha a opção abaixo</li>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>

Source: brother

  • The one with a ... kkk !!! #mass effect

3

Way using .prependTo() and respecting the hierarchy of elements:

$('.opcoes li').on("click",function(){ $(this).prependTo($(".opcoes")); });


$('.opcoes li').on("click",function(){ $(this).prependTo($(".opcoes")); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="opcoes">
 <li id="">Escolha a opção abaixo</li>
 <li id="1">1</li>
 <li id="2">1</li>
 <li id="3">3</li>
</ul>

Browser other questions tagged javascript jquery css

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