在jQuery或Javascript中获取某个属性的最高值和最低值
Get the highest and lowest values of a certain attribute in jQuery or Javascript
我有以下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)?
要实现这一点,您可以创建一个包含所有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();
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/
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;
}
});
创建一个全局变量,并在循环中使用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/
您可以使用排序函数来完成此操作。
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 要容易得多
您应该使用数据而不是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上面接受的答案。
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`
尚未测试,应通过运行
相关文章:
- 函数jquery.html()不提供数据属性集值
- Kendo网格中数据集的最高值
- JavaScript-获取数据属性的值返回未定义的值
- 可以使用属性赋值实现多个函数
- 如何使用JavaScript查找未定义的CSS属性的值
- 无法访问Angular Directive模板函数中的属性实际值
- 获取自定义属性的值
- 交换对象上两个属性的值
- 更改角度指令中属性的值
- 同时打印对象的属性和值Javascript
- 从嵌套对象属性中获取排除某个值的最高值
- 用javascript向数组(?)中的特定属性添加值
- 如何获取保存在变量中的HTML代码的任何属性的值
- 添加数据属性及其值以使用纯javascript进行链接
- 动态更新Angular2指令中自定义属性的值
- 为数组元素的属性赋值将设置所有其他类似元素的属性
- 如何使用javascript获取两个变量的最高值
- 为什么我得到“;无法获取属性的值'SetReturnValue'"当使用ceebox显示YouT
- 从具有最高值的对象返回属性
- 在jQuery或Javascript中获取某个属性的最高值和最低值