Jquery - переставить div на основе массива значений выбора

Question

Мне нужна помощь в завершении моей функции, я думаю, что у меня хорошее начало, но некоторые проблемы заканчиваются!

У меня есть несколько div на моей странице, каждый из которых содержит поле выбора.У меня есть кнопка, чтобы отсортировать элементы в зависимости от значения каждого выбора.

Вот Fiddle с моим кодом и некоторыми комментариями.

Я также поставлюкод здесь:

JS

$('.sort-priority').click(function(){
  var priorityValues = $('select.js-priority').val();

   var arr = [];
   var i= 0;
   $('select.js-priority').each(function() {
     arr[i++] = parseInt(this.value);
   });

  console.log(arr); //Get an array of all my select default values [2, 0, 1, 0]
  arr.sort();
  console.log(arr); //Sorted the array the way I want, so all the 0 values first... [0, 0, 1, 2]

  /* I cant figure out out how to rearrange my divs on the page, so I show the divs in the order of the sorted array of select values. 
  In this example the first box would be box2 (select value of 0), then box4 (select value of 0), box3 (select value of 1) and finally box1 (select value of 2).*/
});

Я немного растерялся из-за того, как манипулировать моим html, чтобы изменить порядок ящиков на основе моего массива ?!Если кто-то может помочь, будет очень признателен!

Answer 1

JS Fiddle .Я только что создал array объекта, который будет содержать значение select и его parentNode.Вы можете sort() это по значению, а затем append parentNode отсортированного массива в контейнер

$('.sort-priority').click(function(){
    var priorityValues = $('select.js-priority').val();

    var arr = [];
  var i= 0;
  $('select.js-priority').each(function() {
    arr[i++] = {value:parseInt(this.value),parent:this.parentNode};
  });

  console.log(arr); //Get an array of all my select edfault values [2, 0, 1, 0]
  arr = arr.sort((a,b) => a.value - b.value);
  arr.forEach(item => {
    document.querySelector('.content').appendChild(item.parent);
  })

  console.log(arr);

Answer 2

• При нажатии кнопки добавьте отсортированные поля.
• Отсортированные блоки основаны на получении всех из них, использовании get() для получения обычного массива и вызове sort.
  • Сортировка выполняется путем поиска выбора в каждом поле, получения их значений и вычитания их для сортировки по возрастанию.

$('.sort-priority').on('click', function(){
  $('.content').append($('.box').get().sort(function(a,b){
    return $('select', a).val() - $('select', b).val();
  }));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="sort-priority">Order by priority</button>
<br /><br />
<div class="content">

  <div class="box" id="box1" data-box="1">
    <select class="js-priority" id="box1-priority">
      <option value="0">Priority 0</option>
      <option value="1">Priority 1</option>
      <option value="2" selected="selected">Priority 2</option>
    </select>
  </div>
  <div class="box" id="box2" data-box="2">
    <select class="js-priority" id="box2-priority">
      <option value="0" selected ="selected">Priority 0</option>
      <option value="1">Priority 1</option>
      <option value="2">Priority 2</option>
    </select>
  </div>
  <div class="box" id="box3" data-box="3">
    <select class="js-priority" id="box3-priority">
      <option value="0">Priority 0</option>
      <option value="1" selected ="selected">Priority 1</option>
      <option value="2">Priority 2</option>
    </select>
  </div>
  <div class="box" id="box4" data-box="4">
    <select class="js-priority" id="box4-priority">
      <option value="0" selected ="selected">Priority 0</option>
      <option value="1">Priority 1</option>
      <option value="2">Priority 2</option>
    </select>
  </div>
  
</div>