Jquery - Rearrange div based on an array of select values

Question

I need help completing my feature, I think I have a good start but some troubles finishing it!

I have multiple divs on my page and each one is containing a select box. I have a button to sort the divs based on the value of each select.

Here is the Fiddle with my code and some comments.

I will also put the code here:

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).*/
});

Im a bit lost on how to manipulate my html to change the box ordering based on my array ?! If anyone could help, would be much appreciated!

Taplar · Accepted Answer · 2019-02-07 19:09:52Z

2

On click of the button, append the sorted boxes.
Sorted boxes is base on getting all of them, using get() to get a normal array, and calling sort.
- Sorting is done by finding the select in each box, getting their values, and subtracting them so it sorts ascending.

$('.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>

answered Feb 7, 2019 at 19:09

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lelly Over a year ago

Oh my, I guess I was overcomplicating my life with my array of values ! I guess I will read more on the sort() function, thanks a lot man

Taplar Over a year ago

Google "Array.prototype.sort" and look for the MDN page for a reference.

Maheer Ali · Accepted Answer · 2019-02-07 19:17:54Z

0

JS fiddle. I just created an array of object which will contain value of select and its parentNode. You can sort() it by value and then append the parentNode of sorted array to container

$('.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);

answered Feb 7, 2019 at 19:17

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Collectives™ on Stack Overflow

Jquery - Rearrange div based on an array of select values

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related