jQuery：如何计算所有匹配元素的最大属性值？

Question

考虑以下 HTML：

<div class="a" x="6"></div>
<div class="a" x="9"></div>
<div class="a" x="2"></div>
...
<div class="a" x="8"></div>

您将如何找到所有.a元素的最大x值？

假设所有x值都是正整数。

Answer 1

只需循环它们：

var maximum = null;

$('.a').each(function() {
  var value = parseFloat($(this).attr('x'));
  maximum = (value > maximum) ? value : maximum;
});

Answer 2

我得到了另一个版本：

var numbers = $(".a").map(function(){
    return parseFloat(this.getAttribute('x')) || -Infinity;
}).toArray();

$("#max").html(Math.max.apply(Math, numbers));

这使用 map 函数来提取 x-Attributes 的值，将对象转换为数组并将数组元素作为函数参数提供给Math.max

Math.max 技巧是从http://ejohn.org/blog/fast-javascript-maxmin/窃取的

更新

添加“|| -Infinity”以在不存在属性时正确处理案例。 见@kubedan的小提琴

Answer 3

用现代 javascript 回到这个问题：

let maxA = $(".a").get().reduce(function (result, item) {
  return Math.max(result, $(item).attr("x"));
}, 0);

Answer 4

您还可以在 jQuery 中使用 Array.sort，如此处所述，然后使用 $('.a:last') 获取所选元素。

Answer 5

我正在做一些关于这个主题的测试，如果性能很重要，一个古老但简单的for会比jQuery.map() ， Math.apply()和Array.sort()更好：

var items = $(".a");
for (var i = 0; i < items.length; i++) {
  var val = items.eq(i).prop('x');
  if (val > max) max = val;
}

以下是jsperf测试： http : //jsperf.com/max-value-by-data-attribute 。 没有什么特别激烈的，但无论如何都很有趣。

Answer 6

var max = null;

$('.a').each(function() {
  var x = +($(this).attr('x'));
  if (max === null || x > max)
    max = x;
}

alert(max === null ? "No matching elements found" : "The maximum is " + max);

请注意将属性转换为数字的一元+运算符。 您可能想要添加一些错误检查以确保它实际上是一个数字 - 并且该属性根本存在。 您可以将选择器更改为仅选择具有类和属性的元素： $('.a[x]') 。

Answer 7

var max =0;
$('.a').each(function(){

    if(parseFloat($(this).attr('x'))>max)
    {
         max = parseFloat($(this).attr('x')) ;
    }
});

alert(max);