jQuery：从类中获取最大的数字答案

【问题标题】：jQuery: Get the biggest number from classesjQuery：从类中获取最大的数字
【发布时间】：2012-05-10 10:03:31
【问题描述】：

<div class="box1">
<div class="box9">
<div class="box4">

如何从以“box”开头的类中获得最大的数字？ 在这种情况下，我必须得到 9 号。

【问题讨论】：

标签： javascript jquery search

【解决方案1】：

您需要遍历所有 div 的元素并获取类名。然后你需要存储最大的值。我为你写一个简单的例子：

HTML：

<div class="box1"></div>
<div class="box9"></div>
<div class="box4"></div>

jQuery:

var biggestNum = 0;
$('div[class^="box"]').each(function(){
    var currentNum = parseInt($(this).attr('class').replace('box', ''), 10);
    if(currentNum > biggestNum) {
        biggestNum = currentNum;
    }
});

alert(biggestNum);

开启jsFiddle

【讨论】：

在大多数情况下，您甚至可以跳过 .replace('box', '') 部分，parseInt 会知道该怎么做。
仅当字符串以数字字符开头时，否则 parseInt 将导致 NaN

【解决方案2】：

这是一个使用 jQuerys map() 函数和 Math.max 的更短的实现：

var nums = $("div").map(function(i, e) {
    return parseInt($(e).attr("class").replace("box",""), 10);
}).get();
alert(Math.max.apply(this, nums))

Example fiddle

【讨论】：

【解决方案3】：

<script>
var classes = new Array();
$('div[class*="box"]').each(
    function(index, value) {
        classes.push(parseInt($(value).attr('class').replace("box",""), 10))
    });

alert(classes.sort().pop());
</script>

发生的事情是： a) 创建空数组 b) 选择所有具有类框的 div[something]

 $('div[class*="box"]')

c) 从类名中获取数字并将其转换为整数

 $('div[class*="box"]')

d) 放入数组中

classes.push(parseInt($(value).attr('class').replace("box",""), 10))

e) 排序数组并弹出最后一个元素（最大的一个）以获得最大值

classes.push(parseInt($(value).attr('class').replace("box",""), 10))

【讨论】：

【解决方案4】：

你好另一个demo http://jsfiddle.net/26GYN/1/ 或 http://jsfiddle.net/ktwDK/2/

表示数量最多的类；它用红色框突出显示。休息演示会说清楚:)

jQuery 代码

var max=0
var maxClass="";
$("div[class^='box']").filter(function(){
    var result = /\d+(?:\.\d+)?/.exec($(this).attr("class").toString());
    if (max < result)
        max = result;

    maxClass = 'box'+max;

}).each(function() {

//dosomething!!          
});
$("div[class^="+maxClass+"]").css('border', '1px red solid');

HTML

<div class="box1">foobar</div>
<div class="box9">testsoo</div>
<div class="box4">hulkfoo</div>

【讨论】：