这段代码有什么作用？ （带数组值的jQuery排序元素）

Question

我正在寻找我的一个问题的答案，并在此处找到了这个问题：
https://repo.continuum.io/archive/Anaconda3-4.2.0-Windows-x86_64.exe

jquery sort element with array value解决我的问题有一个很好的答案。但我不太明白这段代码的工作原理：fantactuka

​var order = [3, 2, 4, 1]​;
var el = $('#sort');
var map = {};

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

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

有人可以解释他的代码的这部分是什么吗？

Answer 1

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>";

你可以写：

for (i = 0; i < cars.length; i++) {
    text += cars[i] + "<br>";
}

http://www.w3schools.com/js/js_loop_for.asp

ARRAY MAP

返回一个数组，其中包含原始数组中所有值的平方根：

var numbers = [4, 9, 16, 25];

function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}

结果将是： 2,3,4,5

http://www.w3schools.com/jsref/jsref_map.asp

您的示例

​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
    }
} 

<强> Flexbox的

另外，如果您愿意使用具有排序功能的css3 flex-box，那么您尝试实现的效果可以很容易实现。

http://www.w3schools.com/cssref/css3_pr_order.asp

Answer 2

因此，在第一个循环（div上的每个循环）中，他将实际DOM元素存储在名为map的对象中。这意味着在完成这个循环后，我们有一个像这样的对象：

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

现在我们有一个数组，其中我们有元素的商店顺序。

因此循环使用该数组[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

等等

Answer 3

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

Here is a working fiddle

var order = [3, 2, 4, 1]​;
var el = $('#sort');
var map = {};

在上面的代码中，order包含所需的排列，el引用容器元素。

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

在上面，使用当前索引与DOM元素创建map。它看起来像这样：

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

最后，下面的代码通过比较map和order来重新排序DOM

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])

由于您要将el中已有的元素追加到el，el.append会将其删除并将其添加到最后。这就是重新排序的方式。 Check this fiddle了解