Loop trough jQuery элементы и отсортировать их как показано на рисунке

Question

У меня есть неизвестно Число элементов HTML, которые мне нужно сортировать для типа карусели.

Представьте себе список Див как следующее:

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

Допустим, что, например, у меня есть 13 Див, я нужно сортировать. Далее оно сделано:

не получите слишком отвлекаться на подсвеченный 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

Если бы они были в контейнере, скажет <div id="container">, просто берет :odd те, и добавить их в конце, используя .appendTo(), как это:

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

You can try it out here. Если они находятся в чем-то другом, концепция это то же самое, возьмите нечетные, добавьте их к родителям в конце.

Answer 2

Представьте у вас есть два ряда #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 3

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

Пример: http://jsfiddle.net/Ed2We/

Answer 4

Как об использовании 2 для петель?

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>