Как отсортировать список по атрибуту данных, игнорируя определенный класс?

Question

Как отсортировать список по атрибуту данных, игнорируя определенный класс?

0

У меня есть неупорядоченный список, который я хочу сортировать. Все элементы списка имеют data-index данных атрибута 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/

Любая помощь будет оценена по достоинству.

timo 27 март 2014, в 10:58

Источник

Теги:

javascript

jquery

list

sorting

4 ответа

1

Пытаться

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

Демо: скрипка

Arun P Johny 27 март 2014, в 06:53

0

Это сделало бы работу,

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

скрипка

Dipak Ingole 27 март 2014, в 07:59

0

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

демонстрация

Puvanarajan 27 март 2014, в 07:52

Ещё вопросы

Sudharsan S · Accepted Answer · 2014-03-27T08-01-00.000Z

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

скрипка

сортировка должна возвращать -1,1 или 0, ваша сортировка будет возвращать только true или false (1 или 0)