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 ='inactive-slide'所有li，除了 class ='active-slide'。功能如下：

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

}

如何移动<ul>内的所有<li>除了特定的<li>一个位置左右按钮左键单击和右键单击</li> </ul> </li>

2 个答案: