JQuery - Как переместить li на другую позицию в ul? (обмен 2 ли)

Question

Какой классный способ применить это? Мне нужен скрипт, который меняет две позиции

в

Answer 1

Вы можете использовать jQuery .after() для перемещения элементов.Я клонировал один из них, чтобы оригинал оставался заполнителем.Это как если бы вы хотели переключать переменные a и b, вам понадобится третья временная переменная.

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

Теперь ваш псевдокод $("#awesome ul li:eq(1)").exchangePositionWith("#awesome ul li:eq(3)"); уже не так псевдо: -)

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

Мне нужно то же самое, и я сделал пример, проверьте здесь 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 (с 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);
}
});