如何全部轉移 <li> 里面 <ul> 除了特定 <li> 左鍵單擊和右鍵單擊左右一個位置

Question

這是我的html，現在我要轉移所有

<li> 

里面

<ul> 

除了特定

<li class="active-slide"> 

左鍵單擊和右鍵單擊同時向左和向右一個位置。

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

我試過這個js代碼：

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

}

但是只改變一種方式，我不能同時改變兩種方式。 並且不能停止轉移這個特殊的

<li class="active-slide"> 

我希望所有<li>應該向左或向右移動一個位置。 但是這個<li lass="active-slide">應該保持其位置，應該是固定的。

因此，在第一次左鍵單擊后，順序應為：

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

提前致謝。

Answer 1

如果我理解不錯，請嘗試以下方法：

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

Answer 2

嘗試將所有class設置為class ='inactive-slide'，除非其中有class ='active-slide' 。 和功能如下：

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

}