jQuery或下划线按span文本排序列表
尝试按照li中的跨度排序ul列表，我有点迷茫。
这是我的HTML代码：
- aa android
- aa ios
- aa facebook
- bb android
- bb ios
- bb facebook
我有一个包含平台名称的数组，不必包含所有平台，并且数组中平台的顺序无关紧要 。 我希望列表按字母顺序排序，然后按照第一个跨度的字母顺序排序。
所以如果我的数组是["ios","android","facebook"]我想按字母顺序排列数组中的元素，也可以按照它们的第一个跨度值排序。 所以在对数组进行排序后，我们将得到：
- aa android
- bb android
- aa facebook
- bb facebook
- aa ios
- bb ios
如果数组只是["ios"] ，则按字母顺序按数组元素排序，然后按字母顺序排序列表的其余部分：
- aa ios
- bb ios
- aa android
- bb android
- aa facebook
- bb facebook
如果数组是["ios","android"]那么“android”将在“ios”之前和之后的“facebook”，因为“facebook”不在数组中：
- aa android
- bb android
- aa ios
- bb ios
- aa facebook
- bb facebook
这就是我到目前为止所做的： PLNKER
如果这可以使用Underscore轻松完成，我宁愿这样做。 谢谢。
您需要通过筛选和排序来分解任务。 然后合并两个结果。
Plunker演示
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);
我的建议是：
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"]); }); });
Before sort : - bb ios
- bb facebook
- bb android
- aa ios
- aa facebook
- aa android
- aa android01
- bb android01
- aa android02
- bb android02
- aa android03
- bb android03
- aa android04
- bb android04
- aa android05
- bb android05
- aa android06
- bb android06
- aa android07
- bb android07
- aa android08
- bb android08
- aa android09
- bb android09
- aa android10
- bb android10
- aa android11
- bb android11
- aa android12
- bb android12
- aa android13
- bb android13
- aa android14
- bb android14
- aa android15
- bb android15
- aa android16
- bb android16
- aa android17
- bb android17
- aa android18
- bb android18
- aa android19
- bb android19
- aa android20
- bb android20
After sort :
编辑：这只做第一种，您必须修改sortElements以按.sort对它们进行分组，然后对li span:first-child进行另一次传递。
我大致使用这个来按data-*属性对列表进行排序，这里是为您使用而修改的代码。 使用jquery获取元素数组，然后使用javascript的本机排序来对它们进行排序 。 这将按字母顺序排序。 在我的用例中，为每个元素分配了一个带有数值的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); }
我找到了一个解决方案：这是我的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 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 + ' ' + elementStringsInMyArray[i] + ' '; } for(var i = 0; i < elementStringsNotInMyArray.length; i++){ ulelement.innerHTML = ulelement.innerHTML + '' + elementStringsNotInMyArray[i] + ' '; } }
这是我的HTML代码
- android
- facebook
- ios
- android
- facebook
- ios
我知道你会喜欢jQuery中的代码，但是当我完成时我才看到它 – 如果你喜欢我的代码并且你希望我在jQuery中重写它我很好用^^
elsewhise我希望它有帮助;）
我想这就是你所追求的。 它首先根据数组中的包含，然后在.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); }); // --------------------------
- bb ios
- bb facebook
- bb android
- aa ios
- aa facebook
- aa android