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 重新排序。

首先，看看它是如何工作的，一个字母排序。 (对于这个问题，这可能就足够了)。 但其次(我真正想做的)按“年龄”排序。我有一个数组，其中包含每个人的姓名和年龄，我可以引用。这可能吗？

我在按类查找时发现了这个

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

排序的输出可以在同一页上，也可以在不同的页上——这无关紧要。谢谢你的帮助。我对 javascript 知之甚少。

我想按顺序排序 1) Andy、Bert、Chas、Dave(即“按字母顺序”)制作:

<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

虽然我不完全确定您打算按什么排序，但应该涵盖所有 Angular 。

/*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