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

考虑到我按字母顺序排序。随意为您的场景做更适合的比较

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();

编辑：排序将函数作为参数，允许您根据数组的属性进行排序

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

对document.getElementsByClassName进行排序

3 个答案: