Offir Pe'er Offir Pe'er - 5 months ago 20
Javascript Question

Jquery Sort by element value in array

I have this 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>


and I want to sort the list items by an array I got:

The array can be:
[ios,android,facebook]
and any other combination of it and not must contain all keys, can be just
[ios]
.

I want the list to be sorted by the array so if I have in it
[ios,android,facebook]
then the list will be sorted like this:

<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

Update :

Final Plunker

For example :

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

And use .find("sort")


You have to tweak the .sort() function,

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

Example snippet.

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>