select element and make it first element

Question

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

when I click on three I want it to be like:-

<ul>
    <li>Three</li>
    <li>One</li>
    <li>Two</li>
    <li>Four</li>
</ul>

Answer 1

If you have jQuery you can use:

$('#items li').click(function() {
  $(this).parent().prepend(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id = "items">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

I can also write a non-jQuery one up if needed.

Answer 2

handle click event with use of remove() and prepend() method.

$("body").on("click",'li',function(){
$('ul').prepend($(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>

</ul>