What does this code do? (jQuery sort element with array value)

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?

DreamTeK · Accepted Answer · 2017-02-06 11:16:57Z

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

edited Feb 6, 2017 at 11:16

answered Feb 6, 2017 at 11:06

DreamTeK

34.6k30 gold badges127 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheWandererr Over a year ago

thank you very much that helped me lot. The var map = {} part confused me.

TheWandererr Over a year ago

Will sure do. Another note i expected that when appending to the parent container it would "copy" the child and the result would look like this: 1 2 3 4 3 2 1 4. But i actually "cuts" out the div is that correct?

surajck · Accepted Answer · 2017-02-06 11:31:42Z

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

surajck · Accepted Answer · 2017-02-06 11:43:16Z

1

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

edited Feb 6, 2017 at 11:43

surajck

1,1759 silver badges24 bronze badges

answered Feb 6, 2017 at 11:18

Kiran Shinde

6,0326 gold badges30 silver badges45 bronze badges

1 Comment

TheWandererr Over a year ago

i expected that when appending to the parent container it would "copy" the child and the result would look like this: 1 2 3 4 3 2 1 4. But i actually "cuts" out the div is that correct?

Collectives™ on Stack Overflow

What does this code do? (jQuery sort element with array value)

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related