Question

我正在尝试使用以下内容获得某些元素的最高高度。

var blocks = [];

for(var i = 1; i < 100; i++) {
    blocks[i] = $('.blocks .block-' + i).outerHeight();
}

var tallest = Math.max.apply(Math, blocks);

console.log(tallest);

高度在块数组中存储得很好但是当我输出最高的变量时，它只是想出NaN。

Answer 1

在您的代码中，for循环以1而非0开头，因此数组的第一个元素未定义且最高返回NaN。

而不是使用blocks[i]向单个数组元素添加值。使用push表示数组。

var blocks = [];

for(var i = 1; i < 100; i++) {
    blocks.push($('.blocks .block-' + i).outerHeight() || 0);
}

var tallest = Math.max.apply(Math, blocks);

console.log(tallest);

检查代码段

var blocks = [];

for (var i = 1; i < 10; i++) {
  blocks[i] = i;
}
var tallest = Math.max.apply(Math, blocks);
snippet.log('Using element : ' + blocks);
snippet.log('Using element tallest is : ' + tallest);

blocks = [];

for(var j = 1; j < 10; j++) {
    blocks.push(j);
}

tallest = Math.max.apply(Math, blocks);

snippet.log('Using push tallest element : ' + tallest);

<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Answer 2

您的数组基于0 - 但DOM是1的索引。使用i - 1作为数组索引，并在将高度记录到数组时使用|| 0以防止添加非数字值。

var blocks = [];

for(var i = 1; i < 100; i++) {
    blocks[i - 1] = $('.blocks .block-' + i).outerHeight() || 0;
}

Answer 3

正如其他人所指出的，你的代码问题是你定义的数组总是有一个未定义的元素，从而导致max函数返回NaN作为输出。将来，请确保定义所需的数组长度。

＆＃13;

var blocks = [];

for (var i = 0; i < 3; i++) {
  blocks[i] = $('.blocks-' + (i + 1)).height();
}

var tallest = Math.max.apply(null, blocks);

alert(tallest);

＆＃13;

        .blocks {
          width: 500px;
          height: 300px;
          border: 1px solid gray;
        }
        .blocks .blocks-1 {
          width: 150px;
          height: 100px;
          border: 1px solid red;
          float: left;
          margin-left: 5px;
        }
        .blocks .blocks-2 {
          width: 150px;
          height: 200px;
          border: 1px solid orange;
          float: left;
          margin-left: 5px;
        }
        .blocks .blocks-3 {
          width: 150px;
          height: 150px;
          border: 1px solid green;
          float: left;
          margin-left: 5px;
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="blocks">
  <div class="blocks-1">
  </div>
  <div class="blocks-2">
  </div>
  <div class="blocks-3">
  </div>
</div>

＆＃13;

Answer 4

您的jQuery选择器错误.blocks .block-1可以选择：

<div class='blocks'>
    <div class='block-1'>1</div>
    <div class='block-2'>2</div>
    <div class='block-3'>3</div>
</div>

但是，我认为你应该想见两节课。使用：

blocks[i-1] = $('.blocks.block-' + i).outerHeight()||0;

注意：$('.blocks.block-' + i)没有空格。

试图获得最高的元素，但返回NaN

4 个答案: