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>
You can change the position of a <li> to the first position of <ul> in jQuery by clicking on the given <li> ?
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><ulclass="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>I created an example based on what I understood about your questioning, 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>Selecioneumaopção</h2><ulclass="opcoes">
<li id="1">1</li>
<li id="2">1</li>
<li id="3">3</li>
</ul>I had to adapt your HTML code so that the logic worked correctly.
Form 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><ulclass="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>This has 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>Escolhaaopçãoabaixo</li><li>1</li><li>2</li><li>3</li></ul>Source: brother