Loop through jQuery elements and sort them as illustrated
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开发者_StackOverflow社区, for instance, i have 13 div's i need to sort. The following has to been done:
Don't 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.
Imagine you have two rows #row1
and #row2
. Then you can traversing through original collection (which in #collection
block) this way:
var $row1 = $('#row1');
var $row2 = $('#row2');
$('#collection div').each(function(i) {
if (i % 2) {
$(this).appendTo($row2)
} else {
$(this).appendTo($row1)
}
});
$(function() {
$wrapper = $("#wrapper");
$("div:odd", $wrapper).appendTo($wrapper);
});
Example: http://jsfiddle.net/Ed2We/
How about using 2 for loops?
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]);
}
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));
output 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>
精彩评论