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

但是我不知道如何将childs的parentcategoryid属性与父母的categoryid相关联。

Answer 1

您无需将数字相乘，只需在两个节点均为子节点或父节点时将订单字段进行比较，如果两个节点都不相同，就可以将类别与parentCategoryId进行比较。

检查此示例-我使用的不是对象（而不是html），因此可以使用data('field')替换属性accesors。是给你一个主意

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

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

2 个答案: