如何通过忽略某个类的数据属性对列表进行排序？答案

【问题标题】：How do I sort a list by data attribute ignoring a certain class?如何通过忽略某个类的数据属性对列表进行排序？
【发布时间】：2023-03-07 10:58:01
【问题描述】：

我有一个想要排序的无序列表。所有列表项都有一个数据属性data-index 及其对应的列表索引号。我想根据这个索引号对列表进行排序，但是，我想忽略具有 .active 类的列表项

因此，在我的以下结构中，我试图按照data-index 的顺序返回具有活动类的列表项之后的所有列表项。类.active 的列表项应被忽略并保持在最前面。

<ul>
    <li class="active" data-index="8">Item 8</li>
    <li class="inactive" data-index="6">Item 6</li>
    <li class="inactive" data-index="5">Item 5</li>
    <li class="inactive" data-index="3">Item 3</li>
    <li class="inactive" data-index="4">Item 4</li>
    <li class="inactive" data-index="2">Item 2</li>
    <li class="inactive" data-index="1">Item 1</li>
    <li class="inactive" data-index="7">Item 7</li>
    <li class="inactive" data-index="9">Item 9</li>
</ul>

我该怎么做呢？

我在我的基本结构中包含了一个 jsfiddle。

http://jsfiddle.net/T9qQt/6/

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery list sorting

【解决方案1】：

$('#sortList').click(function(){
   $('ul .inactive').sort(function(a,b) {
     return $(a).data('index') > $(b).data('index');
}).appendTo('ul');
});

Fiddle

【讨论】：

一个排序需要返回-1,1或者0，你的排序只会返回true或者false（1或者0）

【解决方案2】：

试试

$('#sortList').click(function () {
   var $active  = $('.active');
    var els = $active.nextAll().sort(function(e1, e2){
        return +$(e1).data('index') - +$(e2).data('index');
    }).insertAfter($active);
});

演示：Fiddle

【讨论】：

【解决方案3】：

这样就可以了，

$('#sortList').click(function () {
    $("ul li.inactive").sort(function (a, b) {
        return +$(a).data('index') - +$(b).data('index');
    }).appendTo($("ul"));
});

Fiddle

【讨论】：

【解决方案4】：

<ul>
    <li class="inactive" data-index="8">Item 8</li>
    <li class="inactive" data-index="6">Item 6</li>
    <li class="inactive" data-index="5">Item 5</li>
    <li class="inactive" data-index="3">Item 3</li>
    <li class="inactive" data-index="4">Item 4</li>
    <li class="inactive" data-index="2">Item 2</li>
    <li class="inactive" data-index="1">Item 1</li>
    <li class="inactive" data-index="7">Item 7</li>
    <li class="inactive" data-index="9">Item 9</li>
</ul>

<button id="sortList">Sort this list</button>


$('#sortList').click(function(){
    $('.inactive').sort(function(x,y) {
        return $(x).data('index') - $(y).data('index');
    }).appendTo($('.inactive').parent());
});

Demo

【讨论】：