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

Question

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

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

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

var tab[];

但我不知道如何轻松地对它进行排序，如果有快速的方法。 我该怎么办 ？

Answer 1

如果你定义一个sortByPct函数，其中a和b是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') 。