Сортировка document.getElementsByClassName

Question

Прямо сейчас в моем коде у меня есть таблица динамически, а затем пользователь вводит некоторые данные в поле в таблице. Впоследствии я хотел бы предоставить пользователю возможность сортировать список на основе этого поля. То, что я хотел бы сделать, это использовать document.getElementsByClassName, чтобы захватить все поля значений, а затем отсортировать их, но сохранить данные объекта так что-то вроде этого.

var posts = document.getElementsByClassName('data'); 
posts.values.sort(); // I'd like to sort the array by the value of the html objects 
for(i=0;i<posts.length;i++){ 
    //modify table order 
} 

Answer 1

Предполагая, что все элементы на posts массива являются входными элементами управления, имеющим свойство value, вы могли бы просто сделать

var arr = Array.prototype.slice.call(document.getElementsByClassName('data')); 
arr.sort(function(a, b) { 
    if (a.value < b.value) { 
     return -1; 
    } 

    if (a.value > b.value) { 
     return 1; 
    } 

    return 0; 
}); 

или даже лучше (спасибо @Phil)

arr.sort(function(a, b) { 
    return a.value.localeCompare(b.value); 
}); 

Примите во внимание, что Я делаю алфавитную сортировку. Вы можете сделать сравнение более appropiated для сценария

Answer 2

document.getElementsByClassName даст вам HTMLCollection объект но не массив и HTMLCollection объекта нет Упорядочить

Таким образом, вы должны изменить его в массив.

var posts = document.getElementsByClassName('data') , arr = []; 
for(var i = 0 ; i < posts.length; i++){ 
    arr.push(posts[i]) 
} 
arr.sort() 

Answer 3

Вы хотите сначала преобразовать HTMLCollection в массив, а затем отсортировать.

var posts = document.getElementsByClassName('data'); 
var arr = [].slice.call(posts); // convert HTMLColleciton to Array 
arr.sort(); 

EDIT: Сортировать принимает функцию в качестве параметра, который позволит сортировать на основе собственности на массив в

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort