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

Question

我有一个类似的列表要排序。 它需要按数据顺序对父类类别进行排序。 如果有任何子类别，请从子项中获取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 class='category parent-category' data-order='1' data-categoryId='1' data-parentCategoryId=''>
   <a>Business 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 class='category parent-category' data-order='2' data-categoryId='2' data-parentCategoryId=''>
    <a>Back Office Basics</a>
</li>

目前我有这个：

category.sort(function(a, b){
    return $(a).data('order') - $(b).data('order');
});

category.appendTo('.categories');

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

Answer 1

您只需要这样做：

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

首先从要分类的类别开始，然后根据顺序进行分类。 这只是一个起点，您可以根据需要进行更改。 😇

Answer 2

一种解决方法是将data-*值映射到数字，然后使用这些数字进行排序：

对于具有parent-category类的<li>项目，我们将赋值data-categoryId * 1000 。

因此，下一个<li>项将分别映射到数字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>

现在，对于具有child-category类的<li>项目，我们将值(data-parentCategoryId * 1000) + data-order 。

因此，下一个<li>项将分别映射到数字1001和1002 。

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

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

 $(document).ready(function() { var orderedCats = $(".category").sort((a, b) => { var aCat = $(a).hasClass("parent-category") ? $(a).data("categoryid") : $(a).data("parentcategoryid"); var aOrder = $(a).hasClass("parent-category") ? 0 : $(a).data("order"); var bCat = $(b).hasClass("parent-category") ? $(b).data("categoryid") : $(b).data("parentcategoryid"); var bOrder = $(b).hasClass("parent-category") ? 0 : $(b).data("order"); return (aCat * 1000 + aOrder) - (bCat * 1000 + bOrder); }); $(".wrapper").html(orderedCats); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <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> </div>