Sort array of elements by their ID

Question

I'm trying to sort an array of DOM elements based on their ID. The array is populated by getting all elements with a given class:

var rowsList = document.getElementsByClassName("employee_grid_rows");
rowsList.sort(); //??

How do I get the sorting done by ID?

sort the array only ? or reposition the elements in the DOM in that order ? — Gabriele Petrioli, Dec 23 '14 at 14:13
yes I'm using jQuery for some things, and vanilla for others — Abdul Ahmad, Dec 23 '14 at 14:15

score 2 · Accepted Answer · edited Dec 23 '14 at 14:35

2

You have to sort the HTMLCollection

var rowsList = document.getElementsByClassName("employee_grid_rows");
console.log(rowsList);

var arr = Array.prototype.slice.call( rowsList );
rowsList = arr.sort(function(a, b) {
  //Comparing for strings instead of numbers
  return a.id.localeCompare(b.id);
});

console.log(rowsList);

edited Dec 23 '14 at 14:35

Jeremy Friesen

383
1
3
13

answered Dec 23 '14 at 14:18

sbaglieri

319
2
10

you're declaring two "var rowsList" by the way – Abdul Ahmad Dec 23 '14 at 14:19
thanks, I kept getting 'undefined is not a function' when i tried to use sort, I think this fixed it! – Abdul Ahmad Dec 23 '14 at 14:21
question, I'm removing the divs and then re appending them with the new order, but they're coming back in the same order, my id's have "/" in them ("string/string/string") is this affecting the sorting? – Abdul Ahmad Dec 23 '14 at 14:29
I don't think so, post your code – sbaglieri Dec 23 '14 at 14:33
1

The above solution would work for sorting numbers. To sort on strings, use a.id.localeCompare(b.id);. Solution is provided in my answer. – Jeremy Friesen Dec 23 '14 at 14:33
1

Yep, it only works for numbers, nice catch. – sbaglieri Dec 23 '14 at 14:34
1

yea, I just tired Jeremy's suggestion, worked. Thank you both! – Abdul Ahmad Dec 23 '14 at 14:34

Jeremy Friesen · Answer 2 · 2014-12-23T14:16:20.093

0

rowList = rowList.sort(function(a, b) {
    return a.id.localeCompare(b.id);
});

edited Dec 23 '14 at 14:16

answered Dec 23 '14 at 14:10

Jeremy Friesen

383
1
3
13

I don't have to do a.getAttribute('id')? a.id will work? – Abdul Ahmad Dec 23 '14 at 14:12
2

Yup, it's a DOM element property, and all specific elements inherit from the basic dom element, so they have the id property. – Jeremy Friesen Dec 23 '14 at 14:13
1

Does `HTMLCollection` object have `sort` method? – raina77ow Dec 23 '14 at 14:13
This answer is incorrect. – Salman A Dec 23 '14 at 14:14
1

Since `id`s are always strings (they can't start with a number) this will not yield the expected result! – Jonathan Dec 23 '14 at 14:15
Thank-you. I've made the required adjustment to compare for Strings. – Jeremy Friesen Dec 23 '14 at 14:16

Sort array of elements by their ID

2 Answers2