Пытается получить самый высокий элемент, но возвращает NaN

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

Ваша ошибка селектор 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) не имеет пробелов.

Answer 4

Как указывалось другими, проблема с вашим кодом заключалась в том, что в массиве, который вы определили, всегда был неопределенный элемент, в результате чего функция max возвращала NaN в качестве вывода. В будущем, пожалуйста, определите требуемую длину массива.

var blocks = []; 
 

 
for (var i = 0; i < 3; i++) { 
 
    blocks[i] = $('.blocks-' + (i + 1)).height(); 
 
} 
 

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

 
alert(tallest);

 .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; 
 
     }

<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>