获取jQuery或Javascript中某个属性的最高值和最低值

Posted 2023-02-22

【中文标题】获取jQuery或Javascript中某个属性的最高值和最低值

【英文标题】：Get the highest and lowest values of a certain attribute in jQuery or Javascript

【发布时间】：2013-01-24 10:00:05

【问题描述】：

我有以下 div：

<div id="2" class="maindiv">test</div>
<div id="5" class="maindiv">test</div>
<div id="3" class="maindiv">test</div>
<div id="1" class="maindiv">test</div> 
<div class="maindiv">test</div>     
<div id="4" class="maindiv">test</div>    

如何在jQuery或javascript中获取最高id（5）和最低id（1）？

【问题讨论】：

document.getElementById();?

你的情况是哪个属性？

嗯，我认为那里的那些 id 甚至无效。无论哪种方式：api.jquery.com/each

@Mahn 他们是有效的。 id 的唯一限制是它不能包含空格。

@Mahn 你还不够了解：w3.org/community/webed/wiki/html/Attributes/_Global

【参考方案1】：

创建一个全局变量，并在循环中使用Math.max 将其与每个元素进行比较。

var maxval = Number.MIN_VALUE,
    minval = Number.MAX_VALUE;

$('div').each(function () 
    var num = parseInt(this.id, 10) || 0; // always use a radix
    maxval = Math.max(num, maxval);
    minval = Math.min(num, minval);
);

console.log('max=' + maxval);
console.log('min=' + minval);

http://jsfiddle.net/mblase75/gCADe/

【参考方案2】：

var min = Number.MAX_VALUE, max = Number.MIN_VALUE;
$(".maindiv").each(function () 
    var id = parseInt(this.id, 10);
    if (id > max) 
        max = id;
    
    if (id < min) 
        min = id;
    
);

【参考方案3】：

要实现这一点，您可以创建一个包含所有 id 值的数组，然后使用 Math 获得最高/最低：

var ids = $('.maindiv[id]').map((i, el) => parseInt(el.id, 10)).get();
var lowest = Math.min.apply(Math, ids); // = 1
var highest = Math.max.apply(Math, ids); // = 5

console.log(`$lowest => $highest`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="2" class="maindiv">test</div>
<div id="5" class="maindiv">test</div>
<div id="3" class="maindiv">test</div>
<div id="1" class="maindiv">test</div>
<div class="maindiv">test</div>
<div id="4" class="maindiv">test</div>

注意[id] 属性选择器是必需的，否则0 被假定为缺失值。

如果需要IE支持，需要使用匿名函数代替箭头函数：

var ids = $(".maindiv[id]").map(function() 
  return parseInt(this.id, 10);
).get();

【讨论】：

比我慢 12 秒，但举个例子，所以 +1！

这就是我所说的对 JavaScript 和 jQuery 的深刻理解。

这是一个很好的解决方案，但有些人可能会抱怨全局变量的使用，并且当可以一次确定最小值/最大值时，不必要的两次遍历列表。

大多数（如果不是所有）答案都是完美的，但我选择最前卫...谢谢:)

现在有一个问题...如果 id 不是数字，这将返回“NaN”

【参考方案4】：

您应该为此使用 data 而不是 id。

<div data-value="2" class="maindiv">test</div>
<div data-value="5" class="maindiv">test</div>
<div data-value="3" class="maindiv">test</div>
etc.

编辑：我缩短了我的答案，以支持 Rory McCrossan 在上面接受的答案。

【讨论】：

井id可以用，但data更合适。正如您在问题中提到的，这些是价值观。 ID 旨在用作标识符而不是值。

@MichaelSamuel 因为 ID 不应该存储数据，但 data-* 属性是。所以，使用 data 属性是更好的选择。

@JamesDonnelly 您将如何使用 data-* 来回答 Rory McCrossan 的答案？

【参考方案5】：

function minMaxId(selector) 
  var min=null, max=null;
  $(selector).each(function() 
    var id = parseInt(this.id, 10);
    if ((min===null) || (id < min))  min = id; 
    if ((max===null) || (id > max))  max = id; 
  );
  return min:min, max:max;


minMaxId('div'); // => min:1, max:5

http://jsfiddle.net/qQvVQ/

【参考方案6】：

var valArray = [];
$('.maindiv').each(function()
    valArray.push(parseInt($(this).attr('id'), 10));
)
valArray.sort(function(a, b)  return a - b )

valArrayp[0] // lowest
valArrayp[valArrayp.length - 1] // highest`

没有测试过，应该可以用

【参考方案7】：

您可以使用排序功能来做到这一点。

function arrayify(obj)
    return [].slice.call(null,obj);

var all = arrayify(document.querySelectorAll('div[id]'));
var max = all.sort().pop();
var min = all.sort().reverse().pop();

这比使用 jQuery 更容易