Сортировка списка элементов в JQuery

Question

У меня есть список элементов, которые я получаю с помощью JQuery.

var $self = $(this);
var $fields = $('.identifier-controls', $self);

Этот список представляет собой список элементов, которыми необходимо каким-либо образом манипулировать при визуализации элемента управления. Каждый элемент в списке $ fields содержит атрибут данных, называемый «data-order». Этот атрибут говорит мне, в каком порядке я должен расположить элементы в элементе управления (требования). Порядок не должен быть в прямом линейном порядке (это означает, что первый элемент управления может иметь значение атрибута 10, а следующий 15 и следующий 17 и т. Д. Они просто должны появляться в порядке asc. Есть ли простой способ достижения этого? Все способы, которые я могу придумать, кажутся немного более сложными.

Answer 1

После поиска множества решений я решил написать в блоге о том, как сортировать в jquery . Таким образом, шаги для сортировки jquery "массивоподобных" объектов по атрибуту данных ...

1. выбрать все объекты с помощью селектора jquery
2. преобразовать в фактический массив (не похожий на массив объект jquery)
3. сортировка массива объектов
4. преобразовать обратно в объект jquery с массивом объектов dom

Html

<div class="item" data-order="2">2</div>
<div class="item" data-order="1">1</div>
<div class="item" data-order="4">4</div>
<div class="item" data-order="3">3</div>

Простой селектор jquery

$('.item');

[<div class="item" data-order="2">2</div>,
 <div class="item" data-order="1">1</div>,
 <div class="item" data-order="4">4</div>,
 <div class="item" data-order="3">3</div>
]

Сортировка по порядку данных

function getSorted(selector, attrName) {
    return $($(selector).toArray().sort(function(a, b){
        var aVal = parseInt(a.getAttribute(attrName)),
            bVal = parseInt(b.getAttribute(attrName));
        return aVal - bVal;
    }));
}

> getSorted('.item', 'data-order')

[<div class="item" data-order="1">1</div>,
 <div class="item" data-order="2">2</div>,
 <div class="item" data-order="3">3</div>,
 <div class="item" data-order="4">4</div>
]

Посмотрите, как работает getSorted ().

Надеюсь, это поможет!

Answer 2

Попробуйте:

$(function(){
   var $self = $(this);
   var sortedList = $('.identifier-controls', $self).sort(function(lhs, rhs){
      return parseInt($(lhs).attr("data-order"),10) - parseInt($(rhs).attr("data-order"),10);
   });
});

переменная sortedList теперь содержит отсортированные элементы.

Answer 3

Что-то вроде:

$fields.sort(function(a, b) {
    return a.getAttribute('data-order') > b.getAttribute('data-order');
}).appendTo($fields.parent());

Скрипка: http://jsfiddle.net/gCFzc/

Answer 4

Сортировка вставкой была бы довольно простым способом сделать это.

Или, будучи немного подрывным, вы можете воспользоваться механизмом JavaScript для этого:

var $fields, $container, sorted, index;

$container = $('body');
$fields = $("div[data-order]", $container);
sorted = [];
$fields.detach().each(function() {
    sorted[parseInt(this.getAttribute("data-order"), 10)] = this;
});
sorted.forEach(function(element) {
    $container.append(element);
});

Live Пример:

(function($) {
    var $fields, $container, sorted, index;
  
    $container = $('body');
    $fields = $("div[data-order]", $container);
    sorted = [];
    $fields.detach().each(function() {
        sorted[parseInt(this.getAttribute("data-order"), 10)] = this;
    });
    sorted.forEach(function(element) {
        $container.append(element);
    });
})(jQuery);

<div data-order="30">30</div>
<div data-order="40">40</div>
<div data-order="10">10</div>
<div data-order="20">20</div>
<div data-order="1">1</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Вот как это работает:

• Мы получаем контейнер и получаем из него поля.

• Создаем пустой массив.Помните, что массивы JavaScript на самом деле не являются массивами , и они по своей природе редки.

• Мы отделяем поля, затем перебираем их, получая data-order из элемента DOM и добавление элемента DOM в массив в этой позиции.Предполагается, что значения data-order являются уникальными.

• Получив массив необработанных элементов DOM, мы перебираем его, используя forEach, добавляя их в контейнер.Я не использовал jQuery.each, потому что jQuery.each будет вызывать обратный вызов даже для несуществующих индексов массива, что может быть проблемой, если ваши значения data-order довольно редки.forEach повторяет записи в числовом порядке, пропуская те, которые не существуют.