Javascript 这个代码是做什么的？（带数组值的jQuery排序元素）

我正在寻找我的一个问题的答案，在这里找到了这个问题：

解决我的问题有一个绝妙的答案。但我不太明白这段代码是如何工作的：

​变量顺序=[3,2,4,1]​;
var el=$（'排序'）；
var-map={}；
$（'#sort div'）。每个（函数（）{
var el=$（本）；
映射[el.attr（'n'）]=el；
});
对于（变量i=0，l=order.length；i

---

有人能解释一下这部分代码的作用吗？

JavaScript循环

如果您想反复运行相同的代码，每次都使用不同的值，那么循环非常方便

使用阵列时通常会出现这种情况： 而不是写：

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

结果将是：

2,3,4,5

---

你的例子

​var order = [3, 2, 4, 1]​; //Map Order
var el = $('#sort'); //Get ID of target control
var map = {}; //Create empty map

$('#sort div').each(function() {  //For each control of ID ...
    var el = $(this); //Set el as input id ...
    map[el.attr('n')] = el; //add an attribute called n to each matching control
});

for (var i = 0, l = order.length; i < l; i ++) { //loop through array up to the length of array
    if (map[order[i]]) { //If map equals current iteration
        el.append(map[order[i]]); //Apply order
    }
} 

​变量顺序=[3,2,4,1]​; //地图顺序
var el=$（'排序'）//获取目标控件的ID
var-map={}//创建空地图
$（'#sort div'）。每个（函数（）{//ID的每个控件。。。
var el=$（this）；//将el设置为输入id。。。
map[el.attr（'n'）]=el；//向每个匹配控件添加名为n的属性
});
对于（var i=0，l=order.length；i

---

FLEXBOX

另一方面，如果您愿意使用具有排序功能的css3

flex-box

，那么您尝试实现的效果可能很容易实现

所以在第一个循环（div上的每个循环）中，他将实际的DOM元素存储在名为

map

的对象中。这意味着在完成这个循环后，我们有一个如下的对象：

map = {
    "1": div with attr 1,
    "2": div with attr 2,
    "3": div with attr 3,
    .
    .
}

map = {
    1: <element with n=1>, 
    2: <element with n=2>, 
    3: <element with n=3>, 
    4: <element with n=4>
}

现在我们有了一个数组，其中存储了元素的顺序

所以在这个数组上循环[3,2,1,4]：

when i = 0;
order[i] = 3
map[order[i]] = map[3] = div with attr 3 
appending this div on element

when i = 1;
order[i] = 2
map[order[i]] = map[2] = div with attr 2 
appending this div on element

when i = 2;
order[i] = 1
map[order[i]] = map[1] = div with attr 1 
appending this div on element

---

以此类推

这段代码获取DOM元素的列表，并以指定的方式对元素重新排序

在上面的代码中，

order

保存所需的安排，

el

引用容器元素

$('#sort div').each(function() { 
    var el = $(this);
    map[el.attr('n')] = el;
});

上面，使用当前索引vs DOM元素创建了一个

映射。看起来是这样的：

map = {
    "1": div with attr 1,
    "2": div with attr 2,
    "3": div with attr 3,
    .
    .
}

map = {
    1: <element with n=1>, 
    2: <element with n=2>, 
    3: <element with n=3>, 
    4: <element with n=4>
}

上述循环的运行方式如下：

el.append(map[3])
el.append(map[2])
el.append(map[4])
el.append(map[1])

由于要将
el
中已有的元素追加到
el
中，
el.append
将其删除并添加到末尾。这就是重新排序的方式。要理解这一点
非常感谢您对我的帮助。
var-map={}
部分把我弄糊涂了。当然可以。另一个注意事项是，当附加到父容器时，它会“复制”子容器，结果如下：1 2 3 3 3 2 1 4。但我实际上“剪切”了div，对吗？我希望当附加到父容器时，它会“复制”子容器，结果如下：1234314。但我真的“剪掉”了div，对吗？
map = {
    1: <element with n=1>, 
    2: <element with n=2>, 
    3: <element with n=3>, 
    4: <element with n=4>
}

for (var i = 0, l = order.length; i < l; i ++) {
    if (map[order[i]]) {
        el.append(map[order[i]]);
    }
} 

el.append(map[3])
el.append(map[2])
el.append(map[4])
el.append(map[1])