JQuery - उल में ली को दूसरी स्थिति में कैसे स्थानांतरित करें? (विनिमय 2 ली)

Question

इसे लागू करने का एक अच्छा तरीका क्या है? मुझे एक ऐसी स्क्रिप्ट चाहिए जो < ली> < उल> में दो स्थिति का आदान-प्रदान करे। ऐसा लगता है कि हासिल करना संभव होना चाहिए। आपके प्रतिक्रिया के लिए धन्येवाद।

एचटीएमएल

<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> 

छद्म जावास्क्रिप्ट (JQuery)

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

एचटीएमएल परिणाम

<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> 

सीएसएस:

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%; 
} 

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