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

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

您无需将数字相乘，当两个节点均为子节点或父节点时，只需比较订单字段即可；如果两个节点都不相同，则可以根据parentCategoryId比较类别。

检查此示例-代替使用html，我使用对象（这样我就可以在不使用jQuery的情况下运行它），但是用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;
}