Javascript Jquery-基于select值数组重新排列div

我需要帮助完成我的功能，我想我有一个良好的开端，但一些困难完成它

我的页面上有多个div，每个div都包含一个选择框。 我有一个按钮，可以根据每个选择的值对div进行排序

下面是我的代码和一些注释

我还将把代码放在这里：

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来改变基于数组的框顺序？！如果有人能帮忙，我将不胜感激

• 单击按钮后，添加已排序的框
• 排序框的基础是获取所有框，使用

  get（）

  获取普通数组，然后调用sort。
  • 排序是通过在每个框中找到select来完成的，获取它们的值，然后减去它们，这样它就可以升序排序

$（'.sort priority'）。在（'click'，function（）上{
$（'.content'）.append（$（'.box'）.get（）.sort（函数（a，b）{
返回$（'select'，a.val（）-$（'select'，b.val（）；
}));
});

按优先顺序排列



优先级0
优先事项1
优先事项2
优先级0
优先事项1
优先事项2
优先级0
优先事项1
优先事项2
优先级0
优先事项1
优先事项2

单击按钮后，添加已排序的框
排序框的基础是获取所有框，使用
get（）
获取普通数组，然后调用sort。

排序是通过在每个框中找到select来完成的，获取它们的值，然后减去它们，这样它就可以升序排序



$（'.sort priority'）。在（'click'，function（）上{
$（'.content'）.append（$（'.box'）.get（）.sort（函数（a，b）{
返回$（'select'，a.val（）-$（'select'，b.val（）；
}));
});

按优先顺序排列



优先级0
优先事项1
优先事项2
优先级0
优先事项1
优先事项2
优先级0
优先事项1
优先事项2
优先级0
优先事项1
优先事项2
。我刚刚创建了一个对象的
数组
，它将包含select的值及其
父节点
。您可以
sort（）
按值排序，然后
将排序数组的父节点追加到容器中

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

。我刚刚创建了一个对象的
数组
，它将包含select的值及其
父节点
。您可以
sort（）
按值排序，然后
将排序数组的父节点追加到容器中

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

哦，我的天，我想我的生活太复杂了，我的价值观太多了！我想我会阅读更多关于sort（）函数的内容，非常感谢Mangogle“Array.prototype.sort”，并在MDN页面上查找参考资料。哦，天哪，我想我的生活被我的值数组过度复杂化了！我想我会阅读更多关于sort（）函数的内容，非常感谢Mangogle“Array.prototype.sort”，并在MDN页面上寻找参考。