Javascript Jquery按数组中的元素值排序

我有一个dom：

<ul id="appsList">
    <li><span>some value</span> <span>android</span></li>
    <li><span>some value</span> <span>ios</span></li>
    <li><span>some value</span> <span>facebook</span></li>
    <li><span>some value</span> <span>android</span></li>
    <li><span>some value</span> <span>ios</span></li>
    <li><span>some value</span> <span>android</span></li>
    <li><span>some value</span> <span>android</span></li>
</ul>

更新：

例如：

<li><span>some value</span> <span class="sort">android</span></li>

示例代码段

var arr=['ios'，'android'，'facebook']； var$li=$'appsList li'.clone.SortFunction A，b{ var firstValue=$a.find'.sort'.text； var secondValue=$b.find'.sort'.text； var first=arr.indexOffirstValue； var second=arr.indexOfsecondValue； 变量输出=第二个===-1&&first>-1？-1: 第二个>-1&&first===-1？1： 第二个==-1&&first==-1？第一个值>第二个值： 第二个>第一个？1:-1； 返回输出； }; $'resultAppsList'.html$li 排序前： 一些有价值的机器人 一些有价值的ios 一些价值观 一些有价值的机器人 一些有价值的ios 一些有价值的机器人 一些有价值的机器人 排序后： 更新：

例如：

<li><span>some value</span> <span class="sort">android</span></li>

示例代码段

var arr=['ios'，'android'，'facebook']； var$li=$'appsList li'.clone.SortFunction A，b{ var firstValue=$a.find'.sort'.text； var secondValue=$b.find'.sort'.text； var first=arr.indexOffirstValue； var second=arr.indexOfsecondValue； 变量输出=第二个===-1&&first>-1？-1: 第二个>-1&&first===-1？1： 第二个==-1&&first==-1？第一个值>第二个值： 第二个>第一个？1:-1； 返回输出； }; $'resultAppsList'.html$li 排序前： 一些有价值的机器人 一些有价值的ios 一些价值观 一些有价值的机器人 一些有价值的ios 一些有价值的机器人 一些有价值的机器人 排序后：

---

当然，这在jQuery中是完全可能的，但值得注意的是，jQuery不能做本机DOM不能做的事情；因此，为了补充其他答案，我选择使用ES5提供非jQuery方法，以保持与旧浏览器的兼容性，尽管稍后会提供ES6替代方案：

// 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);

保险商实验室{ 列表样式类型：无； 边际：0.01米0； 填充：0； 显示：内联块； 宽度：45vw； 框大小：边框框； } 李{ 宽度：100%； 填充：0； 边际：0.2米0； } 跨度{ 左边距：1米； } 前{ 内容：属性数据状态“：”； 边缘底部：0.2米； 显示：块； 宽度：60%； 边框底部：1px实心000； 颜色：柠檬黄； } 1雄蕊 2ios 3facebook 4android 5ios 6安卓 7安卓

---

当然，这在jQuery中是完全可能的，但值得注意的是，jQuery不能做本机DOM不能做的事情；因此，为了补充其他答案，我选择使用ES5提供非jQuery方法，以保持与旧浏览器的兼容性，尽管稍后会提供ES6替代方案：

// 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);

保险商实验室{ 列表样式类型：无； 边际：0.01米0； 填充：0； 显示：内联块； 宽度：45vw； 框大小：边框框； } 李{ 宽度：100%； 填充：0； 边际：0.2米0； } 跨度{ 左边距：1米； } 前{ 内容：属性数据状态“：”； 边缘底部：0.2米； 显示：块； 宽度：60%； 边框底部：1px实心000； 颜色：柠檬黄； } 1雄蕊 2ios 3facebook 4android 5ios 6安卓 7安卓

---

值得注意的是，在本例中，$this.text将与$this.find'span.text完全相同，因此您可以稍微减少链以避免不必要的工作；另外，如果缓存text属性以在文档中使用var textProp='textContent'textContent'：'innerText'，然后您可以轻松地避免该部分中的jQuery，只需使用这个[textProp]来检索文本。但是对于那些微小的改变，我真的不值得一个单独的答案来做完全相同的事情。我正在经历一个非常困难的答案，然后我看到你的答案完美地使用排序，这让我大吃一惊！好done@DavidThomas是的，你完全正确。我已经在我的回答中加上了那句话。我没有使用$this.text的原因是，li可能包含一些文本，结果完全基于span的内容。你的第二点也是正确的。是的，这在很大程度上是一个个案的可能性，你应该在没有警告困难的情况下采取这种方法，我想你会有评论指出这个问题。有时候你就是赢不了-更新了。我犯了愚蠢的错误！值得注意的是，在本例中，$this.text将与$this.find'span.text完全相同，因此您可以稍微减少链以避免不必要的工作；另外，如果缓存text属性以在文档中使用var textProp='textContent'textContent'：'innerText'，然后您可以轻松地避免该部分中的jQuery，只需使用这个[textProp]来检索文本。但是对于那些微小的改变，我真的不值得一个单独的答案来做完全相同的事情。我正在经历一个非常困难的答案，然后我看到你的答案完美地使用排序，这让我大吃一惊！好done@DavidThomas是的，你完全正确。我已经在我的回答中加上了那句话。我没有使用$this.te的原因

---

xt是指li可能包含一些文本，结果完全基于span的内容。你的第二点也是正确的。是的，这在很大程度上是一个个案的可能性，你应该在没有警告困难的情况下采取这种方法，我想你会有评论指出这个问题。有时候你就是赢不了-更新了。我犯了愚蠢的错误！这是我们最接近解决方案的地方：这是我们最接近解决方案的地方：这是我们最接近的地方，那里有一个我无法解决的bug，看看第一个结果，假设是ios而不是anroid。这是我们得到的最接近的结果，有一个我无法解决的bug，看看第一个结果，假设是ios而不是anroid。