javascript - 按数据属性和父子关系对li进行排序

Question

我有一个与此类似的列表，我想对其进行排序。它需要按数据顺序对类父类别进行排序。如果有任何子类别，则从子类别中获取父类别ID，并将其与其父类别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');
});

首先对类别进行排序，然后根据顺序进行排序。这只是一个起点，您可以根据需要更改它。 😇