jQuery或下划线按范围文本

时间：2016-07-07 13:47:52

标签： javascript jquery underscore.js

我试图按照li中的跨度订购ul列表有点迷失 这是我的HTML代码：

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

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

因此，如果我的数组是["ios","android","facebook"]，我想按字母顺序排列数组中的元素，也按照它们的第一个跨度值排序。 因此，在对数组进行排序后，我们将得到：

<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"]，则按字母顺序按数组元素排序，然后按字母顺序按列表的其余部分排序：

<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"]那么＆＃34; android＆＃34;将在＆＃34; ios＆＃34;之前之后＆＃34; facebook＆＃34;，因为＆＃34; facebook＆＃34;不在数组中：

<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

如果可以使用Underscore轻松完成，我会更喜欢。 谢谢。

5 个答案:

答案 0 :(得分：1)

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

Plunker Demo 

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

答案 1 :(得分：1)

我的建议是：

＆＃13;
＆＃13; 
Number.prototype.pad = function(size) {
  var s = String(this);
  while (s.length < (size || 2)) {s = "0" + s;}
  return s;
};

function doStuff(arr) {
  var listAllUniqueEle = $.unique($('#appsList li .sort').map(function(index, element) {
    return element.textContent;
  })).sort().toArray();

  listAllUniqueEle = $.unique(arr.sort().concat(listAllUniqueEle));

  var $li = $('#appsList li').clone().sort(function(a, b) {
    var firstValue =  listAllUniqueEle.indexOf(a.childNodes[2].textContent).pad(3) +
        a.textContent + a.textContent;
    var secondValue = listAllUniqueEle.indexOf(b.childNodes[2].textContent).pad(3) +
        b.textContent;
    return firstValue.localeCompare(secondValue);
  });
  $('#resultAppsList').empty().html($li)
}

$(function () {
  $('#btn1').on('click', function(e) {
    doStuff(["ios","android","facebook"]);
  });

  $('#btn2').on('click', function(e) {
    doStuff(["ios"]);
  });

  $('#btn3').on('click', function(e) {
    doStuff(["ios","android"]);
  });
});
＆＃13; 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<button id="btn1">["ios","android","facebook"]</button>
<button id="btn2">["ios"]</button>
<button id="btn3">["ios","android"]</button>
<br>Before sort :
<ul id="appsList">
    <li><span>bb</span> <span class="sort">ios</span></li>
    <li><span>bb</span> <span class="sort">facebook</span></li>
    <li><span>bb</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>aa</span> <span class="sort">android</span></li>
    <li><span>aa</span> <span class="sort">android01</span></li>
    <li><span>bb</span> <span class="sort">android01</span></li>
    <li><span>aa</span> <span class="sort">android02</span></li>
    <li><span>bb</span> <span class="sort">android02</span></li>
    <li><span>aa</span> <span class="sort">android03</span></li>
    <li><span>bb</span> <span class="sort">android03</span></li>
    <li><span>aa</span> <span class="sort">android04</span></li>
    <li><span>bb</span> <span class="sort">android04</span></li>
    <li><span>aa</span> <span class="sort">android05</span></li>
    <li><span>bb</span> <span class="sort">android05</span></li>
    <li><span>aa</span> <span class="sort">android06</span></li>
    <li><span>bb</span> <span class="sort">android06</span></li>
    <li><span>aa</span> <span class="sort">android07</span></li>
    <li><span>bb</span> <span class="sort">android07</span></li>
    <li><span>aa</span> <span class="sort">android08</span></li>
    <li><span>bb</span> <span class="sort">android08</span></li>
    <li><span>aa</span> <span class="sort">android09</span></li>
    <li><span>bb</span> <span class="sort">android09</span></li>
    <li><span>aa</span> <span class="sort">android10</span></li>
    <li><span>bb</span> <span class="sort">android10</span></li>
    <li><span>aa</span> <span class="sort">android11</span></li>
    <li><span>bb</span> <span class="sort">android11</span></li>
    <li><span>aa</span> <span class="sort">android12</span></li>
    <li><span>bb</span> <span class="sort">android12</span></li>
    <li><span>aa</span> <span class="sort">android13</span></li>
    <li><span>bb</span> <span class="sort">android13</span></li>
    <li><span>aa</span> <span class="sort">android14</span></li>
    <li><span>bb</span> <span class="sort">android14</span></li>
    <li><span>aa</span> <span class="sort">android15</span></li>
    <li><span>bb</span> <span class="sort">android15</span></li>
    <li><span>aa</span> <span class="sort">android16</span></li>
    <li><span>bb</span> <span class="sort">android16</span></li>
    <li><span>aa</span> <span class="sort">android17</span></li>
    <li><span>bb</span> <span class="sort">android17</span></li>
    <li><span>aa</span> <span class="sort">android18</span></li>
    <li><span>bb</span> <span class="sort">android18</span></li>
    <li><span>aa</span> <span class="sort">android19</span></li>
    <li><span>bb</span> <span class="sort">android19</span></li>
    <li><span>aa</span> <span class="sort">android20</span></li>
    <li><span>bb</span> <span class="sort">android20</span></li>
</ul>

After sort :
<ul id="resultAppsList">
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

编辑：这只是第一次排序，您必须修改sortElements按.sort对其进行分组，然后在li span:first-child上再次传递。

我大致使用此选项按data-*属性对列表进行排序，此处修改了供您使用的代码。使用jquery获取元素数组，然后使用javascript＆＃39; s本地sort对它们进行排序。这将按字母顺序排序。在我的用例中，为每个元素分配了一个带有数值的data-*属性（该代码低于第一个示例）。这是jsfiddle。

function sortElements($parent, selector, sortSelector) {
    var elArr = $parent.find(selector).get();

    var sorted = elArr.sort(function (a, b) {
        var aSortOrder = $(a).find(sortSelector).text();
        var bSortOrder = $(b).find(sortSelector).text();

        if (aSortOrder > bSortOrder)
            return 1;
        else if (aSortOrder < bSortOrder)
            return -1;
        else
            return 0;
    });

    $parent.html(sorted);
}

按数字data-*属性排序：

function sortElements($parent, selector, dataAttr) {
    var elArr = $parent.find(selector).get();

    var sorted = elArr.sort(function (a, b) {
        var aSortOrder = parseInt($(a).data(dataAttr), 10);
        var bSortOrder = parseInt($(b).data(dataAttr), 10);

        if (aSortOrder > bSortOrder)
            return 1;
        else if (aSortOrder < bSortOrder)
            return -1;
        else
            return 0;
    });

    $parent.html(sorted);
}

答案 3 :(得分：0)

我认为这就是你所追求的。它首先根据数组中的包含，然后是.sort跨度，最后是初始跨度来生成排序。结果将附加回原始父容器，似乎是就地排序。此示例从代码中的“未排序”列表开始。

很多这样的代码只是你当然可以删除的评论。

// --------------------------
// items in this array will sort ahead of those not in the array
// note: position in the array is not important
// --------------------------
var arr = ["ios"];
// --------------------------

// --------------------------
// the parent container
// used to find children and for re-inserting children in the correct order
// --------------------------
var parent = document.getElementById("appsList");
// --------------------------

// --------------------------
// children to be sorted
// --------------------------
var items = Array.from(parent.querySelectorAll("li"));
// --------------------------

// --------------------------
// sort the children
// --------------------------
items.sort(function(a,b){
  // --------------------------
  // create a string that will be sorted
  // --------------------------
  var _prep = function(item){
    var text1 = item.querySelector("span").innerText;
    var text2 = item.querySelector(".sort").innerText;
    return (arr.indexOf(text2) != -1 ? "a~" : "z~") + text2 + "~" + text1
  };
  // --------------------------

  // --------------------------
  // traditional alpha sort function
  // --------------------------
  var _sortAlpha = function(a, b){
    if( a < b ) return -1;
    if( a > b) return 1;
    return 0;
  };
  // --------------------------
  
  // --------------------------
  // return the alpha sorting of our special strings
  // --------------------------
  return _sortAlpha(_prep(a), _prep(b));
  // --------------------------
});
// --------------------------

// --------------------------
// re-insert the children back into the parent
// effectively an in-place sorting
// --------------------------
items.forEach(function(item){ parent.appendChild(item); });
// --------------------------
<ul id="appsList">
    <li><span>bb</span> <span class="sort">ios</span></li>
    <li><span>bb</span> <span class="sort">facebook</span></li>
    <li><span>bb</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>aa</span> <span class="sort">android</span></li>
 </ul>

答案 4 :(得分：0)

我找到了一个解决方案： 这是我的js代码

function listElementsWithMyArray(){

    //here you can configure your array
    var myArray = ["ios"];

    //creates all needed variables
    var elements = document.getElementsByClassName("sort");
    var ulelement = document.getElementById("myUL");
    var elementStrings = [];
    var elementStringsInMyArray = [];
    var elementStringsNotInMyArray = [];

    //to fill the list with the values of the spans
    for(var i = 0; i < elements.length; i++){
        var element = elements[i];
        elementStrings.push(element.innerHTML);
    }

    //sort the list and also remove the <li> items
    elementStrings.sort();
    ulelement.innerHTML = "";

    //check if the item is in your array and add to the final arrays
    for(var i = 0; i < elementStrings.length; i++){
        var b = 0;
        if(myArray.indexOf(elementStrings[i]) > -1){
            elementStringsInMyArray.push(elementStrings[i]);
            b = 1;
        }else{
            elementStringsNotInMyArray.push(elementStrings[i]);
        }
    }

    //sort both arrays
    elementStringsInMyArray.sort();
    elementStringsNotInMyArray.sort();

    //list all items from myArray and later on from notMyArray
    for(var i = 0; i < elementStringsInMyArray.length; i++){
        ulelement.innerHTML = ulelement.innerHTML + '<li><span class="sort">' + elementStringsInMyArray[i] + '</class></li>';
    }
    for(var i = 0; i < elementStringsNotInMyArray.length; i++){
        ulelement.innerHTML = ulelement.innerHTML + '<li><span class="sort">' + elementStringsNotInMyArray[i] + '</class></li>';
    }

}

这是我的HTML代码

<ul id="myUL">
    <li><span class="sort">android</span>
    <li><span class="sort">facebook</span>
    <li><span class="sort">ios</span>
    <li><span class="sort">android</span>
    <li><span class="sort">facebook</span>
    <li><span class="sort">ios</span>
</ul>

我知道你会喜欢jQuery中的代码，但是当我完成时我才看到它 - 如果你喜欢我的代码并且你想让我在jQuery中重写它我很好用^^

elsewhise我希望它有所帮助;）

相关问题
最新问题