jquery .each - 奇怪的计算

Question

我正在使用 .each 循环浏览页面上的元素并查看最大底部值。脚本似乎没问题，只是两个值之间的简单检查 returns 有些奇怪，我无法直接弄清楚我做错了什么。

这是我的 div 设置：

<div id="zone1" data-top="38" data-bottom="1648" data-left="131" data-width="467" data-group="0">...</div>
<div id="zone2" data-top="38" data-bottom="957" data-left="597" data-width="467" data-group="0">...</div>
<div id="zone3" data-top="38" data-bottom="4508" data-left="1064" data-width="467" data-group="0">...</div>

现在脚本：

maxb = 0;
console.log('init max '+maxb);
$('[data-group=0]').each(function()
    {
        tempb = $(this).attr('data-bottom');
        console.log(tempb+' '+maxb);
        if (tempb>maxb)     
            {
                maxb = tempb;
            }
        console.log(tempb+' '+maxb);    
    });

这个脚本的objective是存放数据组0的最大数据底值。

如果我现在查看我的控制台输出：

因此 maxb 已正确初始化。第一个数据 bottom 大于 0，所以 maxb 取这个值，但第二次迭代很奇怪，因为 957 低于 1648，maxb 应该仍然是 1648，但它取 957 作为最大值并保持到最后。好像if条件没有正常工作，但我可能需要睡觉，我看不出问题在哪里。

谢谢洛朗

Answer 1

您确定这些数字被视为整数吗？我知道您可以使用 parseInt() 来获取 javascript 以强制将字符串视为数字，但我很懒，所以我总是只乘以 1，这基本上做同样的事情。

所以基本上，您只需将代码更改为：

tempb = $(this).attr('data-bottom')*1;

Answer 2

这是因为您在此处比较 string 值 - 这意味着 "sorting" resp。逐个字符地进行比较。

根据该指标，957 当然大于 1648 - 因为它以字符 9 开头，并且大于 1。所以对比到此结束，得出957大于1648的结论。

首先将值转换为实数，使用parseInt:

tempb = parseInt($(this).attr('data-bottom'), 10);

Answer 3

请参阅我的 working example 构建值数组然后从中获取最大值的方法。

来源：

文档：

Array prototype

.each()

.push()

遍历对象值并将它们 .push() 放入数组中。

var botArray = [];

$('[data-group=0]').each(function() {
  var item = parseInt($(this).attr('data-bottom'), 10);
  botArray.push(item);
});

var max = Array.prototype.max = function() {
  return Math.max.apply(null, botArray);
};

//

var botArray = [];

$('[data-group=0]').each(function() {
  var item = parseInt($(this).attr('data-bottom'), 10);
  botArray.push(item);
});

var max = Array.prototype.max = function() {
  return Math.max.apply(null, botArray);
};

$('.maxItem').text(max);

.maxItem {
  color: orange;
}
p {
  font-family: arial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="zone1" data-top="38" data-bottom="1648" data-left="131" data-width="467" data-group="0">...</div>
<div id="zone2" data-top="38" data-bottom="957" data-left="597" data-width="467" data-group="0">...</div>
<div id="zone3" data-top="38" data-bottom="4508" data-left="1064" data-width="467" data-group="0">...</div>
<p>
  data-bottom max value is: <span class='maxItem'></span>
</p>

jquery .each - 奇怪的计算

jquery .each - strange calculation

each

jquery