JQuery - How to move a li to another position in the ul? (exchange 2 li's)

Question

What is a cool way to apply this? I need a script that exchange two < li>'s position in an < ul>. It think that should be possible to achieve. Thanks for your response.

HTML

<div id="awesome">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>

Pseudo Javascript (JQuery)

$("#awesome ul li:eq(1)").exchangePostionWith("#awesome ul li:eq(3)");

HTML Result

<div id="awesome">
<ul>
<li>Item 1</li>
<li>Item 4</li>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 5</li>
</ul>
</div>

Answer 1

You can use jQuery's .after() for moving elements around. I cloned one of them so the original can remain as a placeholder. It's like if you wanted to switch variables a and b , you'd need a third temporary variable.

$.fn.exchangePositionWith = function(selector) {
    var other = $(selector);
    this.after(other.clone());
    other.after(this).remove();
};

Now your pseudocode $("#awesome ul li:eq(1)").exchangePositionWith("#awesome ul li:eq(3)"); isn't so pseudo :-)

Answer 2

 $("ul li a").click(function () {
    $(this).parent().insertBefore('ul li:eq(0)');
  });


<ul>
    <li><a>a</a></li>
    <li><a>b</a></li>
    <li><a>c</a></li>
    <li><a>d</a></li>
    <li><a>e</a></li>
    <li><a>f</a></li>
</ul>

Answer 3

I was needing the same and I made an example, check it here http://jsfiddle.net/jeduarz/f88u9u9p/1/

HTML:

<p>Please press intro to select the item in the list</p>
<ul class="thisList">
    <li tabindex="-2">I am wating a coffee</li>
    <li tabindex="-2">I am wating a icecream</span></li>
    <li tabindex="-2">I am wating a model girlfriend</li>
    <li tabindex="-2">I am wating a jirafe</li>
    <li tabindex="-2">I am wating a pankace</li>
</ul>
<br><small>You selected value is here</small>
<div></div>

CSS:

ul {
    background:#F9F9F9);
}
    ul:focus {
    outline:solid 1px green;
}
.thisList {
    list-style-type:none;
    padding:5px;
}
.thisList li {
    border-bottom:1px solid #CCC;
    padding:3px 5px;
}
li:focus {
    outline:solid 1px #F90;
}
div {
    border: 1px solid #CCC;
    margin-top:20px;
    height:50px;
}
p{
    background: #FE0;
    padding:5px;
    margin:10px 0;
    width:100%;
}

JS (with jQuery):

$(document).keyup(function (event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
tab_on = $(':focus').attr('tabindex');
// SCAPE
if (keycode == 27) {
    $(':focus').blur();
}
if (keycode == 40) { // DOWN
    if (tab_on == -2) {
        li = $(':focus').next().is('li');
        if (li) $(':focus').next().focus();
        else {
            $('.thisList li:first-child').focus();
        }
    }
}
if (keycode == 38) { // UP
    if (tab_on == -2) {
        li = $(':focus').prev().is('li');
        if (li) $(':focus').prev().focus();
        else {
            $('.thisList li:last-child').focus();
        }
    }
}
// INTRO
if (keycode == 13) {
    content = $(':focus').html();
    $('div').html(content);
}
});