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

Question

I was looking for an answer to one of my questions and found this question right here:
jquery sort element with array value

And there is a brilliant answer from fantactuka solving my problem. But I don't quite understand how this code works: Full Code

​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]]);
    }
} 

Could someone explain what this part of his code does?

Answer 1

JavaScript Loops

Loops are handy, if you want to run the same code over and over again, each time with a different value.

Often this is the case when working with arrays: Instead of writing:

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

You can write:

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

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

---

ARRAY MAP

Return an array with the square root of all the values in the original array:

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

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

The result will be: 2,3,4,5

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

---

YOUR EXAMPLE

​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

On a side note the effect you are trying to achieve can be quite easy to achieve if you are willing to use the css3 flex-box which has sorting functionality.

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

Answer 2

So in first loop (each loop on div), he stores actual DOM elements in object named map . That means after completion of this loop we have a object like this:

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

Now we have one array in which we have store order of elements.

So in looping on that array [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

and so on

Answer 3

This piece of code takes a list of DOM elements and reorders the elements in the specified fashion.

Here is a working fiddle

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

In the above code, order holds the required arrangement, el references the container element.

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

Above, a map is created with current index vs DOM element. It looks like this:

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

Finally, the below code reorders the DOM by comparing map and order

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

The above loop runs this way:

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

Since you are appending an element already in el into el , el.append removes it and adds it to the end. That's how the reordering happens. Check this fiddle to understand that