Basically I’m going through and renaming div id’s, etc to manipulate later in functions. I’m using jQuery’s detach() which is working but for some reason my while (now for loops) are not working and providing me with bogus numbers.
Code:
var arrayFights=[0,1,2,3,4,5,6,7,8];
var counter = theBox; //where to start in the array
//first change numbers larger than counter
for(i=1;i<fights;i++){
arrayFights[counter] = i;
counter++;
}
//then go back and change numbers prior to theBox
alert(arrayFights);
counter = 1;
for(counter=1;counter<theBox;counter++){
arrayFights[counter] = i;
i++;
}
alert(arrayFights);
Ignore 0, I never call it. Always start at 1.
The max number of fights is 8, and thus 8 boxes (box1,box2,…box8). However I am getting 9 in my alert.
This triggers once I click on an item.
For example, if I click box2 it becomes box 1, so my array I get is:
0,8,1,2,3,4,5,6,7 which is perfect.
Now if I click box2 again (which is technically 3) I get:
0,8,1,2,3,4,5,6,7 which is the same and not perfect. It should be:
0,7,8,1,2,3,4,5,6
When I click 3 I get:
0,8,1,2,3,4,5,6,7 again finally a fourth time
0,8,9,1,2,3,4,5,6,7.
An extra number to my array and 9…
Since It will probably be asked, full function:
function moveBoxes(theBox){
$('#container').scrollTo($('#box1'), 0);
if(fights>1 && theBox != 1 ){
var n = $('.box').length; //max number of items
var i = 1; //counter
var difference = fights - theBox; //difference b/w box and max fights
var arrayFights=[0,1,2,3,4,5,6,7,8];
var counter = theBox; //where to start in the array
//first change numbers larger than counter
for(i=1;i<fights;i++){
arrayFights[counter] = i;
counter++;
}
//then go back and change numbers prior to theBox
alert(arrayFights);
counter = 1;
for(counter=1;counter<theBox;counter++){
arrayFights[counter] = i;
i++;
}
alert(arrayFights);
//now physically change the id
i=1;
$('.box').each(function(){
$(this).attr('id','box'+arrayFights[i]);
$(this).children('a:first').attr('name','box'+arrayFights[i]);
i++;
});
//change links to match id's
i=1;
var tempCounter = 0;
$('#bracket_container .icon').each(function(){
$(this).attr('href','#box'+arrayFights[i]);
tempCounter++;
if(tempCounter == 2){
tempCounter = 0;
i++;
}
});
//anchors
i = 1;
var appendThis;
while(i <= fights){
appendThis = $('#box'+i).detach();
appendThis.appendTo('#mask');
appendThis = null;
i++;
}
}
}
Sorry if my code is sloppy, I’m not the best JS/jQuery dev.
theBox is just an int, and scrollTo is a jQuery plugin.
I have been up for 24hrs now…so I could be missing something stupidly obvious.
Thanks for any and all help,
Justin
P.S. I doubt I can link to the project 
But I’m guessing its something fundamental in my code I’m missing.