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

虽然我不完全确定你打算按什么方式排序，但这应涵盖所有角度。

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

Node information

<小时/> 对于基于数组的排序：

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

var content = document.getElementsByClassName('blog-entry')将为您提供内容中HTMLElement对象的节点列表。
将其转换为Array。
使用Array.sort功能对其进行排序。
在回调中，使用innerHTML属性比较对象。

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

Answer 4

这取决于您的数组的存储方式（unique-id-X是否与ages[X]对应？）但这是一般方法：将自定义比较函数传递给Array.sort。

function toArray(obj) {
    var r = [], i = 0, l = obj.length;

    for(; i < l; i++) {
        if(i in obj) {
            r[i] = obj[i];
        }
    }

    return r;
}

var elements = toArray(document.getElementsByClassName('blog-entry')); // Doesn't have full browser support, so you might want to use jQuery, e.g. here.
var ages = [...];
var names = [...];

elements.sort(function(element1, element2) {
    var index1 = elements.indexOf(element1); 
    var index2 = elements.indexOf(element2);

    // Sort by name first:
    if(names[index1] < names[index2]) { // Can do case-insensitive comparison here, too.
        return -1;
    } else if(names[index1] > names[index2]) {
        return 1;
    } else if(ages[index1] < ages[index2]) {
        // Names were equal, sort by age.
        return -1;
    } else if(ages[index1] > ages[index2]) {
        return 1;
    } else {
        // They're equal.
        return 0;
    }
}).forEach(function(element) {
    // This is where the magic happens! appendChild() is just called in order.
    // The best part is that it looks like it does almost nothing.
    element.parentNode.appendChild(element);
});

当然，有两个可能在IE中无效。（Happy，Raynos？）一个是document.getElementsByClassName，另一个是Array.forEach。某些浏览器（即IE）不支持这些。这是Array.forEach的兼容性脚本：

if(![].forEach) {
    Array.prototype.forEach = function(action, thisArg) {
        for(var i = 0, l = this.length; i < l; i++) {
            if(i in this) {
                action.call(thisArg, this[i], i, this);
            }
        }
    };
}

Answer 5

首先，content不是这里的数组。它是NodeList。所以要做的步骤。

将NodeList转换为数组
排序数组
删除所有博客条目

从排序数组中添加

<div id="blogs">
 <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>
</div>


var blogs = document.getElementById("blogs");
var blogEntries = blogs.getElementsByClassName('blog-entry');
blogEntries = Array.prototype.slice.call(blogEntries);
if(blogEntries && blogEntries.length){
  blogEntries.sort(sortBlogs);
  while (blogs.hasChildNodes()) {
     blogs.removeChild(blogs.lastChild);
  }
  while(blogEntries.length){
     var blogEntry = blogEntries.shift();
     blogs.appendChild(blogEntry);
  }
}

function sortBlogs(a, b){
  var aid = parseInt(a.id.replace("unique-id-", ""));
  var bid = parseInt(b.id.replace("unique-id-", ""));
  return aid - bid;  
}

在此处查看演示：http://jsfiddle.net/diode/8W6AU/7/ 修改函数sortBlogs以进行所需的排序。现在它使用id进行排序。

Answer 6

似乎是使用jQuery和插件TinySort的理想机会。

Javascript：如何对类的元素进行排序

6 个答案: