altezza jQuery() non cambia sul ridimensionamento

Question

Non ho mai avuto questo problema prima ma non riesco a trovare la soluzione, quindi spero che voi ragazzi potete darmi una mano.

jQuery

function setTheHeight() { 

    if($('#main.level1 .block.attention .block-content').length) { 
     //Get value of highest element 
     var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
      function() { 
       return $(this).height(); 
      } 
     )); 
     console.log(maxHeight); 
     $('#main.level1 .block.attention .block-content').height(maxHeight); 
    } 
} 

setTheHeight(); 

$(window).resize(function() { 
    setTheHeight(); 
}); 

Fondamentalmente ciò che questa funzione non fa altro che controllare la più alta div e impostare l'altezza di tutti i div di selezionati a questa altezza. Funziona bene MA è un design reattivo, quindi quando l'utente ridimensiona il suo browser il contenuto diventa più piccolo e il div più alto. Così ho aggiunto un evento di ridimensionamento. L'evento è stato sparato ma non sta cambiando l'altezza. Qualche idea è perché il ridimensionamento non stia cambiando l'altezza?

rapida jsFiddle per mostrare ciò che accade: http://jsfiddle.net/3mVkn/

FIX

Hmm questo era semplicemente stupido. Dato che stavo impostando l'altezza() era già stato fissato, quindi tutto ciò che dovevo fare era resettare l'altezza e ha funzionato.

codice aggiornato:

function setTheHeight() { 

    if($('#main.level1 .block.attention .block-content').length) { 

     //Reset height 
     $('#main.level1 .block.attention .block-content').height('auto'); 

     //Get value of highest element 
     var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
      function() { 
       return $(this).height(); 
      } 
     )); 
     console.log(maxHeight); 
     $('#main.level1 .block.attention .block-content').height(maxHeight); 
    } 
} 

setTheHeight(); 

$(window).resize(function() { 
    setTheHeight(); 
}); 

Answer 1

Questo non è correlato a jQuery ma CSS. È perché una volta impostata l'altezza del contenuto di blocco su un valore, dopo aver ridimensionato la finestra, l'altezza di tali contenuti non verrà modificata perché le altezze non sono più impostate su auto ma su un valore predefinito.

La soluzione è utilizzare return $(this)[0].scrollHeight anziché return $(this).height() In questo modo verrà restituita l'altezza reale del contenuto, non l'altezza definita CSS.

EDIT:

La soluzione è in realtà per calcolare l'altezza di tutti i bambini all'interno del .block-contenuti e poi tornare quel valore. Ho modificato il tuo codice qui http://jsfiddle.net/3mVkn/12/

Questo dovrebbe darti il ​​risultato necessario.

Answer 2

penso che vi manca un parametro di .map() funzione. Ho guardato .map()here.