重新排序多列中的html元素(从一列到另一列)

Question

我有这个html结构。

<div class="main">
    <div class="column-1">
        <div class="box" id="box-1"></div>
        <div class="box" id="box-2"></div>
        <div class="box" id="box-3"></div>
    </div>
    <div class="column-2">
        <div class="box" id="box-4"></div>
        <div class="box" id="box-5"></div>
        <div class="box" id="box-6"></div>
    </div>
</div>

我有两个数字数组

arr1 = [2, 4, 3]
arr2 = [1, 5, 6]

我想将.box div重新定位到给定的位置。

我发现了一个类似的问题here，但它只适用于单列

var wrapper = jQuery('.column-1'), 
    items = wrapper.children('.box'),
    arr = [2,1,0];
wrapper.append( jQuery.map(arr, function(v){ return items[v] }) );

我不知道怎么做，用jquery还是javascript！

预期输出为

<div class="main">
    <div class="column-1">
        <div class="box" id="box-2"></div>
        <div class="box" id="box-4"></div>
        <div class="box" id="box-3"></div>
    </div>
    <div class="column-2">
        <div class="box" id="box-1"></div>
        <div class="box" id="box-5"></div>
        <div class="box" id="box-6"></div>
    </div>
</div>

Answer 1

啊，是的，我的错！首先，我忘了在reorderElements前面添加function。其次，我没有意识到两个数组中的值可以在任何一列中。这使得事情变得有点复杂，但我们可以依靠jQuery的魔力来实现我们的目标。

我已经测试了下面的代码片段，它似乎做了您所期望的事情：

function findElement(parent, number) {
  return parent.find('#box-' + number);
}

function reorderElements() {
    const arr1 = [2, 4, 3];
    const arr2 = [1, 5, 6];
    const col1 = jQuery('.column-1');
    const col2 = jQuery('.column-2');
    col1.append(
        arr1.map(function(value) {
          const col1Elem = findElement(col1, value);
          const col2Elem = findElement(col2, value);
          return col1Elem[0] || col2Elem[0];
        })
    );
    col2.append(
        arr2.map(function(value) {
          const col1Elem = findElement(col1, value);
          const col2Elem = findElement(col2, value);
          return col1Elem[0] || col2Elem[0];
        })
    );
}

reorderElements();

这段代码可以非常明确地进行优化，但它确实做到了！

您可以在CodePen：https://codepen.io/yvesgurcan/pen/gOOEvxr上实时运行代码。

Answer 2

既然您找到了适用于某一列的代码，那么看起来您就快成功了！您可以通过创建一个函数来稍微调整您链接的另一个问题的答案：

reorderElements(parent, arr) {
    const wrapper = jQuery(parent);
    const items = wrapper.children('.box');
    wrapper.append(
        jQuery.map(arr, function(value) { return items[value] })
    );
}

const arr1 = [2, 4, 3]
const arr2 = [1, 5, 6]
reorderElements('.column-1', arr1);
reorderElements('.column-2', arr2);

我还更新了代码以使用const和分号。

你认为如何？这段代码能做你期望的事情吗？