如何全部转移 <li> 里面 <ul> 除了特定 <li> 左键单击和右键单击左右一个位置

Question

Here is my html , now I want to shift all

<li> 

inside a

<ul> 

except a particular

<li class="active-slide"> 

one position left and right while left button click and right button click.

<ul class="clearfix" id="slider_donor">

<li id="slider_1">  
<p class="amount green" id="amount_1">$233,000</p><!-- /.amount -->
<h5 id="donor_1">reeeee</h5>
</li>

<li id="slider_2">
<p class="amount green" id="amount_2">$503,000</p><!-- /.amount -->
<h5 id="donor_2">monster</h5>
</li>

<li id="slider_3">
<p class="amount green" id="amount_3">$1,003,000</p><!-- /.amount -->
<h5 id="donor_3">google</h5>
</li>

<li class="active-slide">
<div class="active-slide-inner">
<h3 id="blackbox">ABC</h3>
<p class="contributed">contributed</p><!-- /.contributed -->
</div><!-- /.active-slide-inner -->
   <a href="javascript:void(0)" class="slider-dir slider-prev" onclick="prev()">prev</a>
   <a href="javascript:void(0)" class="slider-dir slider-next" onclick="next()">next</a>

</li>

<li id="slider_4">
<p class="amount green" id="amount_4">yahoo</p>
<h5 id="donor_4">All Donors Supporting</h5>
</li>

<li id="slider_5">                      
    <p class="amount green" id="amount_5">$12</p><!-- /.amount -->
<h5 id="donor_5">diff </h5>
</li>

    <li id="slider_6">
<p class="amount green" id="amount_6">$4,003,009</p><!-- /.amount -->
<h5 id="donor_6">rediff</h5>
</li>

</ul>

i tried this js code :

function prev(){
$('#slider_donor > li:first').appendTo('#slider_donor');

}

But shift only one way , I cant shift both the ways. And cant stop shifting this particular

<li class="active-slide"> 

I want all <li> should should shift one place left or right . But this <li lass="active-slide"> should hold its position , it should be fixed.

So after first left click the order should be like :

<ul class="clearfix" id="slider_donor">

<li id="slider_6">  
<p class="amount green" id="amount_6">$233,000</p><!-- /.amount -->
<h5 id="donor_6">reeeee</h5>
</li>

<li id="slider_1">
<p class="amount green" id="amount_1">$503,000</p><!-- /.amount -->
<h5 id="donor_1">monster</h5>
</li>

<li id="slider_2">
<p class="amount green" id="amount_2">$1,003,000</p><!-- /.amount -->
<h5 id="donor_2">google</h5>
</li>

<li class="active-slide">
<div class="active-slide-inner">
<h3 id="blackbox">ABC</h3>
<p class="contributed">contributed</p><!-- /.contributed -->
</div><!-- /.active-slide-inner -->
   <a href="javascript:void(0)" class="slider-dir slider-prev" onclick="prev()">prev</a>
   <a href="javascript:void(0)" class="slider-dir slider-next" onclick="next()">next</a>

</li>

<li id="slider_3">
<p class="amount green" id="amount_3">yahoo</p>
<h5 id="donor_3">All Donors Supporting</h5>
</li>

<li id="slider_4">                      
    <p class="amount green" id="amount_4">$12</p><!-- /.amount -->
<h5 id="donor_4">diff </h5>
</li>

    <li id="slider_5">
<p class="amount green" id="amount_5">$4,003,009</p><!-- /.amount -->
<h5 id="donor_5">rediff</h5>
</li>

</ul>

Thanks in advance.

Answer 1

if i understand good,Try this :

$('#slider_donor li').each(function(index, element) {
    var $li=$(element);
    if(! $li.hasClass('active-slide'))
       $li.appendTo('#slider_donor');
});

Answer 2

Try to set class='inactive-slide' all li except of which has class='active-slide' . And function like below:

function prev(){
$('.inactive-slide').appendTo('#slider_donor');

}