jQuery或下划线按范围文本对列表进行排序 [英] jQuery or underscore Sorting a list by span text

问题描述

尝试按li中的跨度排序ul列表时，我有些失落.
这是我的html代码:

I am a bit lost with trying to order an ul list by the span in the li.
This is my html code:

<ul id="appsList">
    <li><span>aa</span>  <span class="sort">android</span></li>
    <li><span>aa</span>  <span class="sort">ios</span></li>
    <li><span>aa</span>  <span class="sort">facebook</span></li>
    <li><span>bb</span>  <span class="sort">android</span></li>
    <li><span>bb</span>  <span class="sort">ios</span></li>
    <li><span>bb</span>  <span class="sort">facebook</span></li>
</ul>

我有一个包含平台名称的数组，不必包含所有平台，并且数组中的平台顺序没关系. 我希望列表按字母顺序排序，然后再按 第一个跨度的字母顺序.

I have an array that holds the platform names and doesn't have to contain all the platforms and the order of the platforms in the array doesn't matter. I would like the list to be sorted by alphabet order and after that by the alphabetic order of the first span.

所以如果我的数组是["ios","android","facebook"]，我想按数组中的元素按字母顺序以及它们的第一个span值排序. 因此，在对数组进行排序之后，我们将得到以下信息:

So if my array is ["ios","android","facebook"] I would like to order by the elements in the array alphabetically and also by their first span value. So after sorting of the array we will get this:

<ul id="appsList">
    <li><span>aa</span>  <span class="sort">android</span></li>
    <li><span>bb</span>  <span class="sort">android</span></li>
    <li><span>aa</span>  <span class="sort">facebook</span></li>
    <li><span>bb</span>  <span class="sort">facebook</span></li>
    <li><span>aa</span>  <span class="sort">ios</span></li>
    <li><span>bb</span>  <span class="sort">ios</span></li>
</ul>

如果数组只是["ios"]，则按数组元素的字母顺序进行排序，然后按字母顺序对列表的其余部分进行排序:

If the array is just ["ios"] then sort by alphabetically by the array elements and then the rest of the list by alphabet also:

<ul id="appsList">
    <li><span>aa</span>  <span class="sort">ios</span></li>
    <li><span>bb</span>  <span class="sort">ios</span></li>
    <li><span>aa</span>  <span class="sort">android</span></li>
    <li><span>bb</span>  <span class="sort">android</span></li>
    <li><span>aa</span>  <span class="sort">facebook</span></li>
    <li><span>bb</span>  <span class="sort">facebook</span></li>
</ul>

如果数组为["ios","android"]，则"android"将在"ios"之前和之后的"facebook"，因为"facebook"不在数组中:

If the array is ["ios","android"] then "android" will be before "ios" and after that "facebook", because "facebook" is not in the array:

<ul id="appsList">
   <li><span>aa</span>  <span class="sort">android</span></li>
   <li><span>bb</span>  <span class="sort">android</span></li>
   <li><span>aa</span>  <span class="sort">ios</span></li>
   <li><span>bb</span>  <span class="sort">ios</span></li>
   <li><span>aa</span>  <span class="sort">facebook</span></li>
   <li><span>bb</span>  <span class="sort">facebook</span></li>
</ul>

这是我到目前为止所做的: PLNKER

This is what I have done so far: PLNKER

如果可以使用Underscore轻松完成此操作，则我希望这样做. 谢谢.

If this can be done easily using Underscore I would prefer that. Thank you.

推荐答案

您将需要通过过滤和排序来分解任务.然后合并两个结果.

You will need to do break up the tasks by filtering and sorting. And then merging the two results.

柱塞演示

 var arr = ["ios"];
 var $li = $('#appsList li').clone();
 var mySort = function(a, b) {
        var objA = {
            "span": $(a).find('span').not('.sort').text(),
            "sort": $(a).find('.sort').text()
        }
        var objB = {
            "span": $(b).find('span').not('.sort').text(),
            "sort": $(b).find('.sort').text()
        }
        output = objA.sort.localeCompare(objB.sort);
        if (objA.sort === objB.sort) {
            output = objA.span.localeCompare(objB.span);
        }
        return output
    } // mySort
 // Filter for what's in your array
 var arrFilter = function(index, el) {
    return arr.indexOf($(el).find('.sort').text()) > -1;
 }

 // Filter for what's not in your array
 var notArrFilter = function(index, el) {
    return arr.indexOf($(el).find('.sort').text()) < 0;
 }
 var $arrLi = $li.filter(arrFilter);
 var $notArrLi = $li.filter(notArrFilter);
 $arrLi = $arrLi.sort(mySort);
 $notArrLi = $notArrLi.sort(mySort);
 var $newLi = [];
 $.merge($newLi, $arrLi);
 $.merge($newLi, $notArrLi);
 $('#resultAppsList').html($newLi);

这篇关于jQuery或下划线按范围文本对列表进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！