Javascript:如何对类的元素排序

Question

我有一个博客，它在php/html页面上生成这样的列表

<div id="unique-id-4" class="blog-entry">Bert blah blah</div>
<div id="unique-id-2" class="blog-entry">Andy blah blah</div>
<div id="unique-id-3" class="blog-entry">Chas blah blah</div>
<div id="unique-id-1" class="blog-entry">Dave blah blah</div>

我想使用javascript重新排序页面上的div。

Firstly，看看它是如何工作的，它是一个按字母顺序排序的。(这可能足以回答这个问题)。但是第二(我真正想做的事情)按“年龄”对它们进行排序。我有一个每个人的名字和年龄的数组，我可以参考。这有可能吗？

我在找班里找的时候发现了这个

var content = document.getElementsByClassName('blog-entry')

排序的输出可以在同一个页面上，也可以在另一个页面上--这并不重要。谢谢你的帮助。我对javascript知之甚少。

我想按以下顺序排序:安迪、伯特、查斯、戴夫(即按字母顺序排列)：

<div id="unique-id-2" class="blog-entry">Andy blah blah</div>
<div id="unique-id-4" class="blog-entry">Bert blah blah</div>
<div id="unique-id-3" class="blog-entry">Chas blah blah</div>
<div id="unique-id-1" class="blog-entry">Dave blah blah</div>

理想情况下

2)根据他们的年龄，在一个单独的数组中: Andy = 42，Bert =18，Chas = 73，Dave = 56；

<div id="unique-id-4" class="blog-entry">Bert blah blah</div>
<div id="unique-id-2" class="blog-entry">Andy blah blah</div>
<div id="unique-id-1" class="blog-entry">Dave blah blah</div>
<div id="unique-id-3" class="blog-entry">Chas blah blah</div>

Answer 1

虽然我不完全确定你打算用什么来分类，但这应该涵盖所有的角度。

/*Sort my entries
  sortProperty = DOM object property that is to be used to sort in ascending order
*/
function sortMyEntries(sortProperty)
{
    var blogEntries = document.getElementsByClassName("blog-entry");
    blogEntries = Array.prototype.slice.call(blogEntries,0)
    blogEntries.sort(function(a,b)
         {
             return (a[sortProperty] > b[sortProperty]);
         })
    return blogEntries;
}

此方法目前仅限于处理特定问题的选择器，但相当灵活。例如，以下两种方法都适用

sortMyEntries("id");  //Sort blog entries by DOM object id
sortMyEntries("innerHTML");  //Sort blog entries by DOM object innerHTML

Answer 2

不使用魔术或不支持的方法：

var elements = document.getElementsByTagName('div');
var filtered = [];
for (var i = 0; i < elements.length; i++) {
    if (elements[i].className === "blog-entry") {
       filtered.push(elements[i]);
    }  
}
var sorted = filtered.sort(function (a, b) {
   return a.innerHTML > b.innerHTML; 
});

var parent = elements[0].parentNode;

for (i = 0; i < sorted.length; i++) {
    parent.appendChild(sorted[i]);
}

JsFiddle演示

节点信息

​

对于基于数组的排序：

​

var people = [{name: "Andy", age: 20}, {name: "Bob", age: 67}];

var sorted = filtered.sort(function (a, b) {
   return people[a.innerHTML].age > people[b.innerHTML].age; 
});

Answer 3

1. var content = document.getElementsByClassName('blog-entry')将在内容中给出HTMLElement对象的节点列表。
2. 将其转换为Array。
3. 使用Array.sort函数对其进行排序。
4. 在回调中，比较使用对象的innerHTML属性。

http://jsfiddle.net/myk2X/3/是一个有用的例子。银容器保存初始对象，浅绿色容器保存结果。