在jquery中切换3个div的位置

Question

我有一个学校练习，我必须把第一个积木放在左边，然后当循环第二次进行时，我需要把第二个积木放在右边，然后第三次把最后一个积木放在左边。

这是我已经拥有的：

$('span.pq').each(function ()
    {

        //Clone om het bij alle span pq te doen
        var quote = $(this).clone();
        quote.removeClass('pq');
        quote.addClass('pullquote');
        $(this).before(quote);

        $('.pullquote').css('float', 'left');

    }); // end each

但问题是他们现在把所有的位置都放在左边

Answer 1

使用:odd和:even伪选择器。

代码段

​

$('div:odd').addClass('pullquote left');
$('div:even').addClass('pullquote right');

.pullquote {
  border: 1px solid blue;
  width: 3em;
  height: 1em;
  }
.right {
  float: right;
  background: rgba(255,0,0,.5);
  }
.left {
  float: left;
  background: rgba(0,255,0,.5);
  }
.right:before { content: 'RIGHT'; }
.left:before { content: 'LEFT'; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

​