javascript - 如何根据属性对 img 元素进行排序？

Question

我有一个 div 中的 img 元素列表，如下所示：

<img src="..." pct="38"/>

每个图像的 pct 值都不同。我设法创建了一个包含我所有图像的列表，并带有一个each()循环。

var tab[];

但是我不知道如何轻松地对其进行排序，以及是否有快速的方法。我应该怎么办 ？

Answer 1

如果你定义一个sortByPct这样的函数 wherea和bare DOM 元素：

var sortByPct = function(a, b) {
  var aNum = new Number($(a).attr("pct"));
  var bNum = new Number($(b).attr("pct"));
  return aNum == bNum ? 0 : (aNum < bNum ? -1 : 1);
}

...您将能够通过以下方式对数组进行排序：

tab.sort(sortByPct);

Answer 2

您可以使用sort函数并将其传递给专用的比较函数：

var strcmp = function(str1, str2) {
    return ( ( str1 == str2 ) ? 0 : ( ( str1 > str2 ) ? 1 : -1 ) );
};
// to sort by src :
tab.sort(function(a,b) {
    return strcmp(a.attr('src'), b.attr('src'));
});
// to sort by "pct" :
tab.sort(function(a,b) {
    return strcmp(a.attr('pct'), b.attr('pct'));
});
// to sort by "pct" as numbers :
tab.sort(function(a,b) {
    return a.attr('pct') - b.attr('pct');
});

这假设您的tab数组包含 jQuery 对象。如果不是这种情况，请使用$(a).attr('pct')代替a.attr('pct').