Question

我需要帮助来完成我的功能，我认为我有一个良好的开端，但是在完成过程中有些麻烦！

我的页面上有多个div，每个div都包含一个选择框。我有一个按钮，可以根据每个选择的值对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

单击按钮后，附加已排序的框。
排序框基于获取所有框，使用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>

Answer 2

JS fiddle 。我刚刚创建了一个对象array，其中将包含select及其值parentNode的值。您可以按值sort() append，然后按$('.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);排序数组的parentNode到容器

# some_file.py (this is this script you're running)
import sys
sys.path.insert(0, '/path/to/application/app/folder')

import file_name_inside_the_folder_above

jQuery-根据选择值数组重新排列div

2 个答案: