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

我有一个无序的列表要排序。所有列表项都有一个数据属性

数据索引

，以及相应的列表索引号。我想根据这个索引编号对列表进行排序，但是，我想忽略类为

.active

因此，在我下面的结构中，我试图按照类的

数据索引的顺序返回类处于活动状态的列表项之后的所有列表项。类为
.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>


第8项
第6项
第5项
第3项
第4项
第2项
第1项
第7项
第9项


我该怎么做呢

我的基本结构中包含了一个JSFIDLE


任何帮助都将不胜感激

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




试试看

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

演示：
试试看

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

演示：
试试看

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

演示：
试试看

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

演示：
这样就可以了

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

这就行了

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

这就行了

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

这就行了

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


第8项
第6项
第5项
第3项
第4项
第2项
第1项
第7项
第9项

将此列表排序
$（“#排序列表”）。单击（函数（）{
$（'.inactive'）.sort（函数（x，y）{
返回$（x）.data（'index'）-$（y）.data（'index'）；
}).appendTo（$（'.inactive'）.parent（））；
});


第8项
第6项
第5项
第3项
第4项
第2项
第1项
第7项
第9项

将此列表排序
$（“#排序列表”）。单击（函数（）{
$（'.inactive'）.sort（函数（x，y）{
返回$（x）.data（'index'）-$（y）.data（'index'）；
}).appendTo（$（'.inactive'）.parent（））；
});


第8项
第6项
第5项
第3项
第4项
第2项
第1项
第7项
第9项

将此列表排序
$（“#排序列表”）。单击（函数（）{
$（'.inactive'）.sort（函数（x，y）{
返回$（x）.data（'index'）-$（y）.data（'index'）；
}).appendTo（$（'.inactive'）.parent（））；
});


第8项
第6项
第5项
第3项
第4项
第2项
第1项
第7项
第9项

将此列表排序
$（“#排序列表”）。单击（函数（）{
$（'.inactive'）.sort（函数（x，y）{
返回$（x）.data（'index'）-$（y）.data（'index'）；
}).appendTo（$（'.inactive'）.parent（））；
});

排序需要返回-1,1或0，您的排序只会返回true或false（1或0）排序需要返回-1,1或0，您的排序只会返回true或false（1或0）排序需要返回-1,1或0，您的排序只会返回true或false（1或0）排序需要返回-1,1或0，您的排序只会返回true或false（1或0）