JQuery - Jak przenieść li na inną pozycję w ul? (wymiana 2 li)

Question

Jaki jest fajny sposób na zastosowanie tego? Potrzebuję skryptu, który wymieni dwie pozycje: < li> w < ul>. Uważa, że ​​powinno być możliwe do osiągnięcia. Dzięki za twoją odpowiedź.

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 Wynik

<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

Można użyć jQuery .after() dla ruchomych elementów wokół. Sklonowałem jedną z nich, aby oryginał mógł pozostać jako symbol zastępczy. To tak, jakbyś chciał zmienić zmienne a i b, potrzebujesz trzeciej zmiennej tymczasowej.

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

Teraz twój pseudokod $("#awesome ul li:eq(1)").exchangePositionWith("#awesome ul li:eq(3)"); nie jest tak pseudo :-)

Answer 2

ja, która tak samo i zrobiłem przykład, sprawdź go tutaj 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); 
} 
}); 

Answer 3

$("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>