Jquery Sort by element value in array

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:

• Array.from().
• Array.prototype.forEach().
• Array.prototype.slice().
• Array.prototype.sort().
• Conditional (Ternary) Operator (assessment ? ifTrue : ifFalse).
• Document.createDocumentFragment().
• Document.getElementById().
• Document.querySelector().
• Function.prototype.call().
• let statement.
• Node.appendChild().
• Node.cloneNode().
• Node.textContent.
• `'property' in Object.
• var statement.