Loop jQuery elements and sort them as shown

advertisements

I have an unknown number of HTML elements which i have to sort for a type of carousel.

Imagine it is a list of div's like the following:

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

Let's say that, for instance, i have 13 div's i need to sort. The following has to been done:

Dont get too distracted by the highlighted 8, that's just the active items i'm showing.

I can't quite figure it out, maybe i've been staring at the thing for too long or tried too many alternatives.

edit: the illustration is maybe a bit distracting.

the result i want is :

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


If they were in a container, say <div id="container">, just takes the :odd ones and append them at the end using .appendTo(), like this:

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

You can try it out here. If they're in something else, the concept it the same, take the odd ones, append them to the parent at the end.