循环遍历jQuery元素并按图示对其进行排序

Question

我有一个未知数量的HTML元素，我必须为一种旋转木马进行排序。

想象一下，这是一个div的列表，如下所示：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<!-- etc -->

让我们说，例如，我有13个div我需要排序。必须完成以下工作：

不要被突出显示的8分散，这只是我正在展示的活动项目。

我无法弄清楚，也许我一直在盯着这个东西太长时间，或者尝试了太多的选择。

编辑： 插图可能有点分散注意力。

我想要的结果是：

<div>1</div>
<div>3</div>
<div>5</div>
<div>7</div>
<div>9</div>
<div>11</div>
<div>13</div>
<div>2</div>
<div>4</div>
<div>6</div>
<div>8</div>
<div>10</div>
<div>12</div>

Answer 1

想象一下，您有两行#row1和#row2。然后你可以用这种方式遍历原始集合（在#collection块中）：

var $row1 = $('#row1');
var $row2 = $('#row2');
$('#collection div').each(function(i) {
    if (i % 2) {
        $(this).appendTo($row2)
    } else {
        $(this).appendTo($row1)
    }
});

Answer 2

如果他们在一个容器中，比如<div id="container">，则只需使用:odd个，然后使用.appendTo()将其附加到最后，如下所示：

$("#container div:odd").appendTo("#container");

You can try it out here。如果他们在别的东西，它的概念是相同的，采取奇怪的，最后将它们附加到父母。

Answer 3

$(function() {
   $wrapper = $("#wrapper"); 
   $("div:odd", $wrapper).appendTo($wrapper);
});

示例：http://jsfiddle.net/Ed2We/

Answer 4

如何使用2 for循环？

for(var i=0, j=yourList.length/2; i<j; i+=2){
    doSomething(yourList[i]);
}
for(var i=1, j=yourList.length/2; i<j; i+=2){
    doSomething(yourList[i]);
}

Answer 5

var r1 = new Array();
var r2 = new Array();
$("DIV","#in").each(function(){
    if(parseInt($(this).text()) % 2 == 1 )
        r1.push($(this));
    else
        r2.push($(this));
});
$.fn.append.apply( $("#in"), $.merge(r1,r2));

输出是：

<div>1</div>
<div>3</div>
<div>5</div>
<div>7</div>
<div>9</div>
<div>11</div>
<div>13</div>
<div>2</div>
<div>4</div>
<div>6</div>
<div>8</div>
<div>10</div>
<div>12</div>