如何重新排列我的数组值以保持与列的关系？

Posted 2023-05-09

【中文标题】如何重新排列我的数组值以保持与列的关系？

【英文标题】：How do I rearrange my array values so relations to columns stay?

【发布时间】：2021-09-20 09:55:30

【问题描述】：

在我提出问题之前，我必须先描述一下我的程序（如果不清楚，请说明）。

代码根据从文件中获取多少列来遍历 X nr 个排序元素，然后基于此生成 html。

5 列会生成类似这样的内容（没有输入所在的表格等中的实际格式，但我认为这对这个问题并不重要）：（它可能 em> 也是 55 列）

HTML：

<input type="checkbox" name="sorting[1]">
<input type="checkbox" name="sorting[2]">
<input type="checkbox" name="sorting[3]">
<input type="checkbox" name="sorting[4]">
<input type="checkbox" name="sorting[5]">

<select name="sortiteration_col[1]">
<option value="">Default</option>
<option value="0">Iteration1</option>
<option value="1">Iteration2</option>
<option value="2">Iteration3</option>
<option value="3">Iteration4</option>
<option value="4">Iteration5</option>
</select>

<select name="sortiteration_col[2]">
<option value="">Default</option>
<option value="0">Iteration1</option>
<option value="1">Iteration2</option>
<option value="2">Iteration3</option>
<option value="3">Iteration4</option>
<option value="4">Iteration5</option>
</select>

<select name="sortiteration_col[3]">
<option value="">Default</option>
<option value="0">Iteration1</option>
<option value="1">Iteration2</option>
<option value="2">Iteration3</option>
<option value="3">Iteration4</option>
<option value="4">Iteration5</option>
</select>

<select name="sortiteration_col[4]">
<option value="">Default</option>
<option value="0">Iteration1</option>
<option value="1">Iteration2</option>
<option value="2">Iteration3</option>
<option value="3">Iteration4</option>
<option value="4">Iteration5</option>
</select>

<select name="sortiteration_col[5]">
<option value="">Default</option>
<option value="0">Iteration1</option>
<option value="1">Iteration2</option>
<option value="2" selected="">Iteration3</option>
<option value="3">Iteration4</option>
<option value="4">Iteration5</option>
</select>

sortiteration_col 定义生成排序列的顺序： （迭代 0-4 相对于第 1-5 列）

1,2,3,4,5 是“正常顺序”。然后将第 1 列设置为第 0 次迭代，第 2 列设置为第 1 次迭代，第 3 列设置为第 2 次迭代，第 4 列设置为第 3 次迭代，第 5 列设置为第 4 次迭代。

也许用户想设置4,5,2,3,1，然后第 4 列设置为迭代 0，第 5 列设置为迭代 1，2 设置为迭代 2，3 设置为迭代 3，第 1 列设置为迭代 4。

用户为他/她设置迭代次数的每一列定义这个（来自 sortiteration_col[column_nr]。

在 jQuery 中我有这个代码：

$('div input[name^="sorting"]').each(function( index ) 
  var this_name = $(this).attr('name'),
  col_number  = this_name.split('[')[1].split(']')[0];

        
  //Get iteration value (which order should the sorting be done)
  //for this column
  var iteration = $('div select[name="sortiteration_col[' + col_number + ']"');

  var iteration_nr = null;
  if (iteration.length>0) 
    iteration_nr = iteration.val();
  

  console.log('COL ' + col_number + ': Iteration nr=' + iteration_nr);

);

从 console.log 我得到这个：

COL 1: Iteration nr=2
COL 2: Iteration nr=0
COL 3: Iteration nr=1
COL 4: Iteration nr=3
COL 5: Iteration nr=4

我希望用户能够按自定义顺序排序。而不是在下面的例子中只有 1,2,3,4,5：2,3,1,4,5

I want to do this below but not with hardcoded values ofc:

colorder_arr.push(2); //Add COL nr (iteration 0 = col 2 from above)
colorder_arr.push(3); //Add COL nr (iteration 1 = col 3 from above)
colorder_arr.push(1); //Add COL nr (iteration 2 = col 1 from above)
colorder_arr.push(4); //Add COL nr (iteration 3 = col 4 from above)
colorder_arr.push(5); //Add COL nr (iteration 4 = col 5 from above)

如何获得正确的列值以添加到 colorder_arr？

---

EDITED/UPDATED澄清：

暂时跳过有关表单的所有内容 :-)

我有这个数组

  var iterationorder_col = [2,0,1,3,4];

假设这个数组与第 1、2、3、4、5 列相关（iterationsorder_col 中的项目数）。

这意味着

2 与第 3 列有关 0 与第 1 列有关 1 与第 2 列相关 3 与第 4 列有关 4 与第 5 列有关。

（来自项目的值 + 1 = 列 nr） 这将产生一个数组：[3,1,2,4,5]

但我希望这些重新排列如下：

值 2（因为它在 iterationorder_col 中是值 0） 值 3（因为它是 iterationorder_col 中的值 1） 值 1（因为它是 iterationorder_col 中的值 2） 值 4（因为它是 iterationorder_col 中的值 3） 值 5（因为它是 iterationorder_col 中的值 4）

（注 0、1、2、3、4）

因此新数组应该包含：

[2,3,1,4,5]

我在想一些事情是这样的：

var new_cols = [];

for(i=0;i<iterationorder_col.length;i++)           
    for (j=0;j<iterationorder_col.length;j++) 
        if ( iterationorder_col[i] == j) 
            new_cols.push(j);
            break;
              
     

但是这段代码显然不起作用:-)

【问题讨论】：

“colorder_arr”从哪里获取数据？

@AlexandroPalacios - 基于 var 迭代 = $('div select[name="sortiteration_col[' + col_number + ']"');和实际的colnr：col_number。这是我想根据列和迭代相互关联的方式添加的新数组。

我想我可以帮助你，但最后一个问题，你为什么使用名称为“sorting[n]”的复选框？

@AlexandroPalacios - 实际上它是一个单选按钮（我看到我输入了错误的问题），但要解释为什么它需要一个全新的问题。我不相信这对我的问题很重要。我包含的原因只是为了明确它是一个表单元素数组。

【参考方案1】：

现在你需要什么更清楚了！让我们从你的数组开始：

var iterationorder_col = [2,0,1,3,4];

现在，你需要获取数组中每个元素的索引，这意味着：

值 0 的索引为 1 值 1 的索引为 2 值 2 的索引为 0 值 3 的索引为 3 值 4 的索引为 4

为此，我建议使用indexOf() 函数，该函数返回数组中元素的索引。你可以通过for() 指令来做到这一点：

var index_array = [];

for (var i = 0; i < iterationorder_col.length; i++) 
    index_array[i] = iterationorder_col.indexOf(i);

这将给出一个数组index_array = [1, 2, 0, 3, 4] 请注意，您要在最后获得的数组等于 index_array + 1（每个项目 + 1）。 所以final_array = [2, 3, 1, 4, 5]，要实现这一点，你可以对索引数组的每一项进行加法，或者你可以像这样修改最后的for()指令：

var final_array= [];

for (var i = 0; i < iterationorder_col.length; i++) 
    final_array[i] = iterationorder_col.indexOf(i) + 1;  //notice the +1 increment

就是这样 ;-) 你可以试试这个sn-p中的完整代码

var iterationorder_col = [2,0,1,3,4];

var final_array= [];

for (var i = 0; i < iterationorder_col.length; i++) 
    final_array[i] = iterationorder_col.indexOf(i) + 1;  //notice the +1 increment


console.log(final_array);

【讨论】：

唯一重要的是 var iteration = $('div select[name="sortiteration_col[' + col_number + ']"');以及它是哪一列。这应该足以回答我想要的。我遍历元素排序 $('div input[name^="sorting"]') 但我也可以遍历 $('div input[name^="sortiteration_col"]') （迭代次数相同所以没关系）。

我刚刚编辑了它。看看这是不是你想要的

我想你不明白我的意思。我将不得不澄清我的问题:-)

我编辑了我的帖子。也许我现在有了解决方案:-)

我再次对其进行了更新，并跳过了有关表单的所有内容。只是一个简单的数组，我想用那个数组做什么。我希望它清楚我想要什么。现在对我来说更清楚了:-)