Блог

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

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

 <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, таком как Quicksand, но он клонирует элементы, меняя свой идентификатор, и у меня есть несколько элементов внутри каждого сортируемого div, которые мне нужно сохранить, чтобы их идентификатор взаимодействовал с ними извне контейнера. Я искал другие плагины, но все они выполняли некоторую сортировку, но по-другому, и я решил сделать это сам.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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