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

您只需要这样做：

var InfiniteRotator =
    {
        init: function()
        {
            var numOfCalls = 0;

            //initial fade-in time (in milliseconds)
            var initialFadeIn = 500;

            //interval between items (in milliseconds)
            var itemInterval = 500;

            //cross-fade time (in milliseconds)
            var fadeTime = 500;

            //count number of items
            var numberOfItems = $('.exploding-faces img').length;

            //set current item
            var currentItem = 0;

            //show first item
            $('.exploding-faces img').eq(currentItem).fadeIn(initialFadeIn);

            //loop through the items
            var infiniteLoop = setInterval(function(){

                    $('.exploding-faces img').eq(currentItem).fadeOut(fadeTime);

                    if(currentItem == numberOfItems -1){
                        currentItem = 0;

                    }else{
                        currentItem++;
                    }
                    $('.exploding-faces img').eq(currentItem).fadeIn(fadeTime);

            }, itemInterval);
        }
    };

   InfiniteRotator.init(); //how make it fade out after a number of seconds?
   //setTimeOut did not work

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

Answer 2

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

对于具有<li>类的parent-category项目，我们将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>

现在，对于具有类<li>的{{1}}项，我们将估算child-category的值。

因此，接下来的(data-parentCategoryId * 1000) + data-order个项目将分别映射到数字<li>和1001。

最后，我们在生成的数字上使用<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);
});

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

2 个答案: