Javascript 按数据属性对列表排序_Javascript_Html_Sorting_Html Lists

Javascript 按数据属性对列表排序

javascript html sorting

Javascript 按数据属性对列表排序,javascript,html,sorting,html-lists,Javascript,Html,Sorting,Html Lists,我有一份按姓名排序的职位列表，如下所示： <ul> <li data-azsort="smithjohn"> <a href="#"> <span class="list-name">John Smith</span> </a> <span class="list-desc">Professor</span> </li> .. <l

我有一份按姓名排序的职位列表，如下所示：

<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属性添加到元素中，我想将这些列表元素弹出到一个数组中，并使用普通JavaScript基于data-*属性进行排序

按数据排序A-Z并返回相同代码的最佳方式是什么？只使用JavaScript，不使用jQuery等。

获取所有列表项，将它们放入数组中，稍后将对其进行排序，怎么样

var allListElements=document.getElementByIdstaff.getElementsByTagNameli； var staff=新数组；对于i=0；i<所有列表元素长度；i++{ staff.pushallListElements[i].getAttribute'data-azsort'； } 职员：sortfunctiona，b{ 如果ab，返回1；返回0； }; //印刷品文件。写“已排序”；对于i=0；i可以将比较函数传递给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);

这适用于任何数量的列表：它基本上收集uls中具有您的属性的所有lis，根据它们的data-*属性值对它们进行排序，并将它们重新附加到其父级

Array.fromdocument.querySelectorAllul>li[数据排序] .sort{dataset:{azsort:a}，{dataset:{azsort:b}}=>a.localeCompareb//若要将其反转，请使用“b.localecompara”。 .forEachitem=>item.parentNode.appendChilditem；堆栈溢出用户教授讲师教授讲师堆栈溢出用户

那么问题出在哪里呢？什么是staff？HTML属性是data sortaz，在您提到的data-azsort描述中。您可以看到function@IvankaTodorova谢谢，更正了此操作是否仅适用于一个列表或任意数量的列表？是的，这将对“数据”属性进行重新排序，但如何根据新的排序再次输出完整列表？也就是说，标签、职位等都很好，完全符合我的要求，代码很少+1@Xufox谢谢你的回答。我非常需要这个。但我需要它以相反的顺序和不同的数据属性，但没关系。也许在你的答案中告诉你，要反转加载的顺序，你只需要将and>设置为b是个好主意-1:a

[html]相关文章推荐

随机文章推荐