javascript - Jquery按数组中的元素值排序

Question

我有这个 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>

我想按我得到的数组对列表项进行排序:

数组可以是:[ios,android,facebook] 和它的任何其他组合，不一定包含所有键，可以只是 [ios]。

我希望列表按数组排序，所以如果我在其中有 [ios,android,facebook] 那么列表将按如下方式排序:

<ul id="appsList">
    <li><span>some value</span> <span>ios</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>
    <li><span>some value</span> <span>android</span></li>
    <li><span>some value</span> <span>android</span></li>
    <li><span>some value</span> <span>facebook</span></li>
</ul>

Answer 1

更新:

Final Plunker

例如:

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

并使用.find("sort")

---

你必须调整 .sort() 函数，

var arr = ['ios','android','facebook'] ;

var $li = $('#appsList li').sort(function(a,b) {
      var firstValue = $(a).find('.sort').text();
        var secondValue = $(b).find('.sort').text();

        var first = arr.indexOf(firstValue);
        var second = arr.indexOf(secondValue);

        var output = (second === -1 && first > -1) ? -1 :
        (second > -1 && first === -1) ? 1 :
        (second === -1 && first === -1) ? firstValue > secondValue :
        (second > first ? 1 : -1);
        return output;
});

$('#appsList').html($li);

---

示例片段。

var arr = ['ios','android','facebook'] ;
    
var $li = $('#appsList li').clone().sort(function(a,b) {

        var firstValue = $(a).find('.sort').text();
        var secondValue = $(b).find('.sort').text();

        var first = arr.indexOf(firstValue);
        var second = arr.indexOf(secondValue);

        var output = (second === -1 && first > -1) ? -1 :
        (second > -1 && first === -1) ? 1 :
        (second === -1 && first === -1) ? firstValue > secondValue :
        (second > first ? 1 : -1);
        return output;
});

$('#resultAppsList').html($li)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Before sort : 
 <ul id="appsList">
    <li><span>some value</span> <span class="sort">android</span></li>
    <li><span>some value</span> <span class="sort">ios</span></li>
    <li><span>some value</span> <span class="sort">facebook</span></li>
    <li><span>some value</span> <span class="sort">android</span></li>
    <li><span>some value</span> <span class="sort">ios</span></li>
    <li><span>some value</span> <span class="sort">android</span></li>
    <li><span>some value</span> <span class="sort">android</span></li>
 </ul>

After sort :
<ul id="resultAppsList">
</ul>