v1
- by lukasradek 2/13/202200
Setup HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
console.log('setup HTML');
</script>
<style>
#cont {
background:yellow;
display:flex;
flex-direction:column;
}
#cont > * {
order:-1;
}
</style>
<div id="cont"></div>Setup JavaScript
var mostlyOrdered = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,101,102,103,104,105,106,107,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457,458,459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491,492,493,494,495,496,497,498,499,100,108,245];
var shuffled = [154,173,368,33,379,448,136,391,68,60,386,35,328,176,65,355,462,426,299,375,403,278,171,381,326,102,29,140,54,16,233,270,498,213,239,396,4,370,99,225,133,202,246,90,286,477,50,19,71,446,76,113,323,227,147,320,166,424,175,93,468,183,293,383,37,189,338,361,442,249,430,87,495,295,371,290,161,306,312,367,150,451,253,45,263,388,450,466,469,330,456,268,499,256,298,182,258,221,185,224,423,404,226,275,287,124,327,218,254,449,429,493,13,15,23,10,389,259,274,75,17,474,488,439,260,489,363,11,86,193,203,156,291,144,27,21,357,412,257,85,198,197,414,192,410,350,229,77,481,438,36,351,135,281,444,325,284,487,137,443,460,28,92,190,241,264,358,114,422,272,431,472,314,118,151,47,269,331,3,315,262,345,416,94,206,479,486,425,471,134,401,153,121,292,288,111,96,228,341,160,302,400,242,51,53,46,440,453,223,435,362,378,120,103,289,38,236,30,61,142,155,237,467,322,317,62,59,418,465,57,200,332,25,2,109,217,491,339,265,208,157,104,346,123,390,234,70,433,112,24,334,148,251,411,138,417,22,455,186,83,311,377,267,497,207,40,415,374,343,42,484,169,248,222,18,349,48,244,67,180,359,305,58,167,128,397,196,240,110,187,107,52,188,392,393,276,141,177,399,252,174,333,117,304,437,132,44,283,73,394,492,419,490,9,340,319,348,231,366,98,8,194,199,97,122,372,408,354,421,271,220,84,89,105,496,402,74,406,255,168,32,398,100,108,238,149,382,165,41,273,303,145,409,365,307,245,205,384,163,445,297,482,380,116,250,158,184,88,454,413,483,31,7,457,81,181,0,485,55,119,139,373,159,43,210,376,494,420,127,211,69,478,49,313,215,191,434,261,170,329,385,152,14,82,204,458,464,294,216,146,352,95,126,427,300,12,129,353,243,6,78,310,364,369,72,125,79,309,162,63,318,195,80,475,39,201,219,428,344,130,336,296,335,447,279,337,321,395,56,452,282,66,106,115,209,356,461,405,5,470,342,91,178,360,324,280,247,432,101,1,235,347,473,480,476,143,214,301,212,230,407,316,20,164,172,26,387,436,463,266,64,459,285,308,441,232,179,277,131,34];
const randoms = false ? mostlyOrdered : shuffled;ready
var elems = [];
var elemsHtml = '';
for (var i=0; i < randoms.length; i++) {
elemsHtml += '<div id="e'+ randoms[i]+ '">' + randoms[i] + '</div>';
}
$('#cont').empty().append(elemsHtml);
var sorted = randoms.slice().sort(function(a,b){return a - b;});
var prevElemId = undefined;
var prevElem = undefined;
const cont = $('#cont');
let skipped = 0;
var contHtml = cont.html();
for (var i=0; i < sorted.length; i++) {
const elemId = 'e' + sorted[i];
const elem = $('#' + elemId);
if (prevElemId === undefined) {
elem.prependTo(cont);
} else {
if (prevElem.next().attr('id') !== elemId) {
prevElem.after(elem);
} else {
skipped++;
}
}
prevElemId = elemId;
prevElem = elem;
}ready
var elems = [];
var elemsHtml = '';
for (var i=0; i < randoms.length; i++) {
elemsHtml += '<div id="e'+ randoms[i]+ '">' + randoms[i] + '</div>';
}
$('#cont').empty().append(elemsHtml);
var sorted = randoms.slice().sort(function(a,b){return a - b;});
for (var i=0; i < sorted.length; i++) {
$('#e'+sorted[i]).css('order', i);
}teardown JavaScript
let prev = -1;
$('#cont > *').each(function(){
const elem = $(this);
let thisNum = parseInt(elem.css('order'));
if (thisNum === -1) {
thisNum = parseInt(elem.text());
if (thisNum !== prev+1) {
console.log('err dom order', thisNum, prev);
}
prev = thisNum;
} else {
if (parseInt(elem.text()) !== thisNum) {
console.log('css order error');
}
}
});