JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.broofa.com/Tools/JSLitmus/JSLitmus.js"></script>
CSS
p {
margin: 10px 0;
}
ul {
display: none;
}
JavaScript
/**
* Generate seed data
*/
function seed() {
var words = ["hello", "world", "IE", "need", "for", "speed", "generated", "random", "number", "blah"];
var upperBound = 1000;
var ul = $("<ul>"), li, id, index;
for(var i = 0; i < upperBound; i++) {
index = parseInt(Math.random() * words.length, 10);
id = parseInt(Math.random() * upperBound * 100, 10);
var word = words[id];
li = $("<li></li>", {
id: id,
text: id + " - " + word
});
ul.append(li);
}
$("body").append(ul);
var msg = "Generated " + upperBound + " elements that are hidden.";
$("body").append("<p>" + msg + "</p>");
}
/**
* Do everything using jQuery
*/
function onlyJQuery() {
var listItems = $("li");
listItems.sort(function(a, b) {
var idA = $(a).attr('id');
var idB = $(b).attr('id');
return (idA - idB);
});
}
/**
* Get elements using jQuery. Don't wrap each li with jQuery.
*/
function jQuerySortElements() {
var listItems = $("li").get();
listItems.sort(function(a, b) {
return a.id - b.id;
});
}
/**
* Generate an array of numbers from ids, then sort that array
* Use jQuery to get the elements
*/
function jQuerySortIDs() {
var listItems = $("li").get();
var ids = [];
for(var i = 0; i < listItems.length; i++) {
ids.push(listItems[i].id);
}
ids.sort(function(a, b) {
return a - b;
});
}
/**
* Get li elements natively and sort
*/
function sortElements() {
var listItems = document.getElementsByTagName("li");
var nodeArray = [].slice.call(listItems, 0);
nodeArray.sort(function(a, b) {
return a.id - b.id;
});
}
/**
* Generate an array of numbers from ids, then sort that array
* Don't use jQuery to get the elements
*/
function sortIDs() {
var listItems = document.getElementsByTagName("li");
var ids = [];
for(var i = 0; i <...