html
html
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
<!DOCTYPE html>
<html>
<head>
<title>JS Shuffle Childs Elements</title>
</head>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
</ul>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
</ul>
<input type="button" onclick="shuffleChilds('body>ul:first-child');" value="shuffle first list">
<input type="button" onclick="shuffleChilds('body>ul');" value="shuffle both lists">
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function shuffleChilds(query_selector) {
var elist = document.querySelectorAll(query_selector);
var k, j, i = elist.length;
var e, echild;
while (i--) {
e = elist[i];
echilds = [];
j = e.childNodes.length;
while (j--) {
echilds.push(e.removeChild(e.childNodes[j]));
}
j = echilds.length;
while (j) {
k = Math.floor(j--*Math.random());
e.appendChild(echilds.splice(k,1)[0]);
// console.log(''+echilds.splice(k,1)[0]);
}
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run