[英]Sorting a list by data-attribute
我有一個按人名排序的職位列表,如下所示:
<ul>
<li data-azsort="smithjohn">
<a href="#">
<span class="list-name">John Smith</span>
</a>
<span class="list-desc">Professor</span>
</li>
..
<li data-azsort="barnestom">
<a href="#">
<span class="list-name">Tom Barnes</span>
</a>
<span class="list-desc">Lecturer</span>
</li>
</ul>
我已將data-azsort
屬性添加到<li>
元素,並且我想將這些列表元素彈出到一個數組中,並根據該data-*
屬性進行排序(使用純 JavaScript)。
通過data-azsort
(AZ) 對列表進行排序並返回相同代碼的最佳方法是什么? 只有 JavaScript,沒有 jQuery 等。
這適用於任意數量的列表:它基本上收集ul
中具有您的屬性的所有li
,根據它們的data-*
屬性值對它們進行排序,並將它們重新附加到它們的父級。
Array.from(document.querySelectorAll("ul > li[data-azsort]")) .sort(({dataset: {azsort: a}}, {dataset: {azsort: b}}) => a.localeCompare(b)) // To reverse it, use `b.localeCompare(a)`. .forEach((item) => item.parentNode.appendChild(item));
<ul> <li data-azsort="skeetjon"> <a href="#"><span class="list-name">Jon Skeet</span></a> <span class="list-desc">Stack Overflow user</span> </li> <li data-azsort="smithjohn"> <a href="#"><span class="list-name">John Smith</span></a> <span class="list-desc">Professor</span> </li> <li data-azsort="barnestom"> <a href="#"><span class="list-name">Tom Barnes</span></a> <span class="list-desc">Lecturer</span> </li> </ul> <ul> <li data-azsort="smithjohn"> <a href="#"><span class="list-name">John Smith</span></a> <span class="list-desc">Professor</span> </li> <li data-azsort="barnestom"> <a href="#"><span class="list-name">Tom Barnes</span></a> <span class="list-desc">Lecturer</span> </li> <li data-azsort="skeetjon"> <a href="#"><span class="list-name">Jon Skeet</span></a> <span class="list-desc">Stack Overflow user</span> </li> </ul>
有趣的是,它獲取同一個數組中的所有li
,對它們進行排序,但最終找出li
最初屬於哪個列表。 這是一個非常簡單直接的解決方案。
如果要按數字數據屬性對元素進行排序,請改用此排序函數:
// Presumably, the data-* attribute won’t be called `azsort`. Let’s call it `numsort`.
({dataset: {numsort: a}}, {dataset: {numsort: b}}) => Number(a) - Number(b) // `Number(b) - Number(a)` to reverse the sort.
一個稍長的 ECMAScript 5.1 替代方案是:
Array.prototype.slice.call(document.querySelectorAll("ul > li[data-azsort]")).sort(function(a, b) {
a = a.getAttribute("data-azsort");
b = b.getAttribute("data-azsort");
return a.localeCompare(b);
}).forEach(function(node) {
node.parentNode.appendChild(node);
});
獲取所有列表項,將它們推送到稍后將被排序的數組中怎么樣?
var allListElements = document.getElementById("staff").getElementsByTagName("li"); var staff = new Array(); for (i = 0; i < allListElements.length; i++) { staff.push(allListElements[i].getAttribute('data-azsort')); } staff.sort(function(a, b) { if (a < b) return -1; if (a > b) return 1; return 0; }); //Print document.write('<h4>Sorted</h4>'); for (i = 0; i < staff.length; i++) { document.write(staff[i] + "<br />"); }
<h4>Input</h4> <ul id="staff"> <li data-azsort="smithjohn"> <a href="#"> <span class="list-name">John Smith</span> </a> <span class="list-desc">Professor</span> </li> <li data-azsort="barnestom"> <a href="#"> <span class="list-name">Tom Barnes</span> </a> <span class="list-desc">Lecturer</span> </li> </ul>
此外,您可以保存<li>
的索引並重新排序<ul>
。
您可以將比較函數傳遞給 Array.prototype.sort
你應該能夠做類似的事情
$items = $('li[data-azsort]');
var compareElem = function (a, b) {
if (a.attr('data-azsort') > b.attr('data-azsort') {
return 1;
} else {
return -1
}
};
Array.prototype.sort.apply($items, compareElem);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.