Javascript 按数据属性和父子关系对li排序

我有一个类似的列表，我想排序。它需要按数据顺序对类父类别进行排序。如果存在任何子类别，请从子类别中获取parentcategoryid，并将其与其父类别id匹配，然后按数据顺序对其所有子类别进行排序

<li class='category parent-category' data-order='1' data-categoryId='1' data-parentCategoryId=''>
   <a>Business Basics</a>
</li>

<li class='category parent-category' data-order='2' data-categoryId='2' data-parentCategoryId=''>
    <a>Back Office Basics</a>
</li>

<li class='category child-category' data-order='1' data-categoryId='3' data-parentCategoryId='1'>
    <a>Core Business</a>
</li>

<li class='category child-category' data-order='2' data-categoryId='4' data-parentCategoryId='1'>
    <a>Product</a>
</li>

---

它按数据顺序对所有li元素进行排序，而不考虑父子关系。

您只需要这样做：

category.sort(function(a, b) {
  if ($(a).data('categoryId') != $(b).data('categoryId'))
    return $(a).data('categoryId') - $(b).data('categoryId')
  else
    return $(a).data('order') - $(b).data('order');
});

---

这从正在排序的类别开始，然后根据顺序排序。这只是一个起点，您可以根据需要进行更改 一种方法是将

数据-*

值映射到数字，然后使用这些数字进行排序：

对于具有类

父类别的
项，我们分配
数据类别ID*1000的值

因此，接下来的
项将分别映射到数字
1000
和
2000
。这也将确保我们可以在每个类别上有很多子类别

<li class='category parent-category' data-order='1' data-categoryId='1' data-parentCategoryId=''>
   <a>Business Basics</a>
</li>

<li class='category parent-category' data-order='2' data-categoryId='2' data-parentCategoryId=''>
    <a>Back Office Basics</a>
</li>

最后，我们对这些生成的数字使用
sort（）
。总之，您可以在下一个代码段中看到此逻辑的实现：


$（文档）.ready（函数（）
{
var orderedCats=$（“.category”）.sort（（a，b）=>
{
var aCat=$（a）.hasClass（“父类别”）？$（a）.data（“categoryid”）：$（a）.data（“parentcategoryid”）；
var aOrder=$（a）.hasClass（“父类别”）？0:$（a）.data（“顺序”）；
var bCat=$（b）.hasClass（“父类别”）？$（b）.数据（“类别ID”）：$（b）.数据（“父类别ID”）；
var bOrder=$（b）.hasClass（“父类别”）？0:$（b）.data（“顺序”）；
返回（aCat*1000+订单）-（bCat*1000+边框）；
});
$（“.wrapper”）.html（orderedCats）；
});


商业概论


后台基础知识


核心业务


产品


category.sort(function(a, b) {
  if ($(a).data('categoryId') != $(b).data('categoryId'))
    return $(a).data('categoryId') - $(b).data('categoryId')
  else
    return $(a).data('order') - $(b).data('order');
});

<li class='category parent-category' data-order='1' data-categoryId='1' data-parentCategoryId=''>
   <a>Business Basics</a>
</li>

<li class='category parent-category' data-order='2' data-categoryId='2' data-parentCategoryId=''>
    <a>Back Office Basics</a>
</li>

<li class='category child-category' data-order='1' data-categoryId='3' data-parentCategoryId='1'>
    <a>Core Business</a>
</li>

<li class='category child-category' data-order='2' data-categoryId='4' data-parentCategoryId='1'>
    <a>Product</a>
</li>