JQuery - 如何將li移動到ul中的另一個位置？ （兌換2裏的）

Question

什麼是一個很酷的方式來應用這個？我需要一個腳本來交換兩個< li>在< ul>中的位置。 它認爲應該有可能實現。感謝您的答覆。

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> 

僞的Javascript（JQuery的）

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

HTML結果

<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

您可以使用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

我需要相同的，我做了一個例子，檢查這裏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>