Сложная сортировка jQuery div

Question

Я пытаюсь сортировать некоторые DIVS по-разному, и я совершенно потерян.Я пробовал кое-что, но я не понимаю, как заставить его работать.

У меня есть набор разных div с одним и тем же классом, разными идентификаторами, rels и data-attribute внутри контейнера.

<div id="container">
    <div class="sortable" id="div541" rel="1234" data-rel="Name One">
        [some inside html including a table and divs]
    </div>
    <div class="sortable" id="div354" rel="4321" data-rel="Name Two">
        [some inside html including a table and divs]
    </div>
    <div class="sortable" id="div763" rel="112233" data-rel="Name Three">
        [some inside html including a table and divs]
    </div>
</div>

Тогда у меня есть элемент <select>, в котором пользователь выбирает тип сортировки.Опции могут быть по числовому значению «сохранены» в атрибуте rel (по возрастанию и по убыванию) и по имени «сохранены» в атрибуте data-rel (также по возрастанию и по убыванию).

Сначала я подумал о плагине jQuery-вроде Зыбучие пески , но он клонирует элементы, меняющие свой идентификатор, и у меня есть несколько элементов внутри каждого сортируемого элемента div, и мне нужно сохранить их идентификатор, чтобы взаимодействовать с ними снаружи контейнера.Я искал другие плагины, но все они выполняли некоторую сортировку, но по-другому, и я решил сделать это сам.

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

 var ids = ['#div541', '#div354', '#541' ...];
 var cont = $('#resultados');
 $.each(ids, function(i, v) {
     cont.append($(v));
 });

Но я должен отсортировать массив идентификаторов, прежде чем выполнять фактическую сортировку, и вот где я потерян.Прежде чем я продолжу, это лучший способ добиться сортировки?Будет ли часть container.append изменять какой-либо идентификатор или дубликат и div?

Если все в порядке, не могли бы вы помочь мне сделать это?

Сначала я бы сделал $('.sortable).each() в том, что я делаюмассив из 3 столбцов.Затем я сортирую атрибут rel или data-rel по ASC или DESC, и после сортировки массива я использую его для добавления () div в контейнер.Это нормально?Я ненавижу использовать массивы специально в JavaScript, поэтому не могли бы вы помочь мне сделать функцию для сортировки, а затем вернуть список идентификаторов в порядок?

Большое спасибо!

Answer 1

Интересным способом сортировки было бы создание массива специально созданных строк, содержащих отсортированное значение атрибута, sperarator и идентификатор элемента.

В данных вашего примера массив строк должен выглядеть следующим образом:

['Name One#div541', 'Name Two#div354', 'Name Three#div763', ...]

или если вы хотите отсортировать по числовому значению:

['0001234#div541', '0004321#div354', '0112233#div763', ...]

Обратите внимание, что в этом случае вы должны дополнить нумерацию строк нулями, чтобы сортировка по строке была правильной.

После этого вы можете просто использовать javascript .sort() метод в массиве. После сортировки массива вы можете получить идентификаторы, проанализировав данные перед разделителем.

Если вы хотите, чтобы сортировка происходила в порядке убывания, просто используйте .reverse() после сортировки.

Редактировать

Вы можете преобразовать созданный массив в желаемый массив идентификаторов следующим образом:

var idsArray = $.map( craftedArray, function(val, i) {
  return val.substring(val.indexOf('#'));
});