While this is, of course, perfectly possible in jQuery it's worth noting that jQuery cannot do things that the native DOM cannot; therefore to complement other answers I chose to offer a non-jQuery approach using ES5 in order to maintain compatibility with older browsers (though an ES6 alternative is offered later):
// caching the '#appsList' element:
var list = document.getElementById('appsList'),
// working out which text-property is present in the browser
// (Chrome and Firefox, to the best of my knowledge, support
// both innerText and textContent; whereas IE < 9 supports
// only innerText):
textProp = 'textContent' in document ? 'textContent' : 'innerText',
// retrieving an Array of the (element) children of the list,
// using Array.prototype.slice() and Function.prototype.call()
// to turn the collection of child elements into an Array;
// we then sort the Array using Array.prototype.sort() and
// its anonymous function:
sorted = Array.prototype.slice.call(list.children, 0).sort(function(a, b) {
// here we find the first/only <span> element in the previous
// Array element ('a') and the first/only <span> in the current
// ('b') element and comparing its text:
return a.querySelector('span')[textProp] > b.querySelector('span')[textProp];
}),
// creating a documentFragment:
fragment = document.createDocumentFragment();
// iterating over the sorted Array of elements:
sorted.forEach(function(el) {
// appending a clone of the element ('el') to the
// fragment (in order to show the before/after together):
fragment.appendChild(el.cloneNode(true));
});
// retrieving the element to show the newly-sorted result:
document.getElementById('resultAppsList').appendChild(fragment);
var list = document.getElementById('appsList'),
textProp = 'textContent' in document ? 'textContent' : 'innerText',
sorted = Array.prototype.slice.call(list.children, 0).sort(function(a, b) {
return a.querySelector('span')[textProp] > b.querySelector('span')[textProp];
}),
fragment = document.createDocumentFragment();
sorted.forEach(function(el) {
fragment.appendChild(el.cloneNode(true));
});
document.getElementById('resultAppsList').appendChild(fragment);
ul {
list-style-type: none;
margin: 0 0 1em 0;
padding: 0;
display: inline-block;
width: 45vw;
box-sizing: border-box;
}
li {
width: 100%;
padding: 0;
margin: 0 0 0.2em 0;
}
span {
margin-left: 1em;
}
ul::before {
content: attr(data-state)': ';
margin-bottom: 0.2em;
display: block;
width: 60%;
border-bottom: 1px solid #000;
color: limegreen;
}
<ul id="appsList" data-state="Before">
<li>1<span>android</span>
</li>
<li>2<span>ios</span>
</li>
<li>3<span>facebook</span>
</li>
<li>4<span>android</span>
</li>
<li>5<span>ios</span>
</li>
<li>6<span>android</span>
</li>
<li>7<span>android</span>
</li>
</ul>
<ul id="resultAppsList" data-state="After">
</ul>
JS Fiddle demo.
To bring the above a little more up-to-date for modern browsers, here we have the ES6 update (though I suspect it could probably be even more ES6-ified):
// using the let statement to initialise variables:
let list = document.getElementById('appsList'),
textProp = 'textContent' in document ? 'textContent' : 'innerText',
// using Array.from() to convert the Array-like collection into an
// Array:
sorted = Array.from(list.children).sort(function(a, b) {
return a.querySelector('span')[textProp] > b.querySelector('span')[textProp];
}),
fragment = document.createDocumentFragment();
// using Arrow functions within the Array.prototype.forEach() call, since we're
// not using the 'this' keyword and it's pleasantly abbreviated:
sorted.forEach(el => fragment.appendChild(el.cloneNode(true)));
document.getElementById('resultAppsList').appendChild(fragment);
let list = document.getElementById('appsList'),
textProp = 'textContent' in document ? 'textContent' : 'innerText',
sorted = Array.from(list.children).sort(function(a, b) {
return a.querySelector('span')[textProp] > b.querySelector('span')[textProp];
}),
fragment = document.createDocumentFragment();
sorted.forEach(el => fragment.appendChild(el.cloneNode(true)));
document.getElementById('resultAppsList').appendChild(fragment);
ul {
list-style-type: none;
margin: 0 0 1em 0;
padding: 0;
display: inline-block;
width: 45vw;
box-sizing: border-box;
}
li {
width: 100%;
padding: 0;
margin: 0 0 0.2em 0;
}
span {
margin-left: 1em;
}
ul::before {
content: attr(data-state)': ';
margin-bottom: 0.2em;
display: block;
width: 60%;
border-bottom: 1px solid #000;
color: limegreen;
}
<ul id="appsList" data-state="Before">
<li>1<span>android</span>
</li>
<li>2<span>ios</span>
</li>
<li>3<span>facebook</span>
</li>
<li>4<span>android</span>
</li>
<li>5<span>ios</span>
</li>
<li>6<span>android</span>
</li>
<li>7<span>android</span>
</li>
</ul>
<ul id="resultAppsList" data-state="After">
</ul>
References:
