具有数据属性和父子关系的排序列表

Question

我有一个与此类似的列表，我想对其进行排序。它需要按数据顺序排序，父级在前，子级在后。

数据顺序为 1 的父级

数据顺序为 1 的子级

数据顺序为 2 的子级

数据顺序为 3 的子级

数据顺序为 2 的父级

数据顺序为 1 的子级

数据顺序为 2 的子级

例子：

<li class='category parent-category' data-order='1' data-categoryId='5' 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='5'>
    <a>Core Business</a>
</li>

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

想要的结果：

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

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

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

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

这是我目前所拥有的：

  $(document).ready(function()
        {
            var orderedCats = $(".category").sort((a, b) =>
            {

                if ($(a).hasClass("parent-category")) {
                    var aCategory = $(a).data("categoryid");
                } else {
                    var aCategory = $(a).data("parentcategoryid");
                }

                if ($(a).hasClass("parent-category")) {
                    var aOrder = 0;
                    var order = $(a).data("order");
                } else {
                    var aOrder = $(a).data("order");

                }

                if ($(b).hasClass("parent-category")) {
                    var bCategory = $(b).data("categoryid");
                } else {
                    var bCategory = $(b).data("parentcategoryid");
                }

                if ($(b).hasClass("parent-category")) {
                    var bOrder = 0;
                } else {
                    var bOrder = $(b).data("order");
                }

                return (aCategory * 1000 + aOrder) - (bCategory * 1000 + bOrder);
            });

            $(".categories").html(orderedCats);
        });

我的想法是将父母数据顺序乘以 1000，如果是孩子，则将其订单 ID 添加到父母。

父母 1000, 2000, 3000, ...

儿童 1001, 1002, ... , 2001, 2002, ...

但我不知道如何将孩子的 parentcategoryid 属性与父母的 categoryid 关联起来。

Answer 1

您不需要将数字相乘，您只需要在两个节点都是子节点或父节点时比较 order 字段，如果它们不同，则将 category 与 parentCategoryId 进行比较。

检查这个例子——我没有使用 html，而是使用了对象（所以我可以在没有 jQuery 的情况下运行它），但是用 data('field') 替换属性访问器应该可以工作。就是给你一个思路

let array = [
  { parent: true, order: "1", categoryId: '5', text: 'business Basics' },
  { parent: true, order: "2", categoryId: '2', text: 'Back Office Basics' },
  { parent: false, order: "1", categoryId: '3', parentCategoryId: 5, text: 'Core Business' },
  { parent: false, order: "2", categoryId: '4', parentCategoryId: 5, text: 'Product' },
];
array.sort((a, b) => {
    // if both parent or both child, just compare the order.
    // here you would use hasClass('parent-category')
    if(a.parent === b.parent) {
      // compare order, using .data('order')
      let order1 = parseInt(a.order);
      let order2 = parseInt(b.order);
      return order1 - order2;
    }
    // here one of both is a child. Compare the categoryId of parent against parentCategory of child
    return a.parent ? parseInt(a.categoryId) - b.parentCategoryId : parseInt(b.categoryId) - a.parentCategoryId;
     
 });
console.log(array);

Answer 2

我最终添加了一个新的数据属性 data-allorder，并在排序之前对其进行了设置，因此我只需对一个属性进行排序。这是我解决这个问题的方法。

$('.category').each(function() {
    // if parent, set data-allorder to 1000 x data-order
    if ($(this).hasClass('parent-category')) {
        let parentOrder = parseInt($(this).attr('data-order'));
        $(this).attr('data-allorder', (parentOrder * 1000));
    }

    if ($(this).hasClass('child-category')) {
        // find data-allorder of parent, get child data-order, add, set child data-allorder
        let parentCategoryId = $(this).attr('data-parentcategoryid');
        let findParent = $('.categories').find('[data-categoryid="' + parentCategoryId + '"]');
        let parentAllOrder = parseInt($(findParent).attr('data-allorder'));
        let childOrder = parseInt($(this).attr('data-order'));
        $(this).attr('data-allorder', (parentAllOrder + childOrder));
    }
});

$(".categories li").sort(sort_li)
    .appendTo('.categories');

function sort_li(a, b) {
    return ($(b).data('allorder')) < ($(a).data('allorder')) ? 1 : -1;
}