Jak wykrywać i zmieniać wysokość div w jQuery

Question

Pozwól mi zacząć od stwierdzenia, że ​​ze względu na skomplikowany projekt layoutu doszedłem do napisania funkcji o nazwie equalHeights, która zasadniczo wygląda na kilka divów w moim układzie i wybiera najwyższy i ustawia wysokość spoczynku, tak, że mogę skończyć z divami, które mają równe wysokości. Więc po załadowaniu strony, jeśli zajrzysz do kodu, zobaczysz styl = "height: xxx" jest zastosowany do każdego div. Nie mogę tego zmienić, więc żadne rozwiązanie nie może dotknąć tej funkcji.

Elementy div mają również ustawienie overflow, które ma swój cel i nie może się zmienić.

W związku z tym, co muszę zrobić, to być w stanie zmienić wysokość div na podstawie zmian z powodu interakcji użytkownika. Na przykład mam tabelę z ukrytymi wierszami, które są rozszerzane, gdy użytkownik kliknie link. Dodatkowa długość tabeli zostanie ukryta z powodu przepełnienia, potrzebuję rozmiaru div, aby rozwinąć. W tym samym czasie nie chcę wiązać tego rozszerzenia do tego konkretnego kliknięcia, chcę, aby JavaScript wykrył zmiany w treści i odpowiednio rozszerzył mój div. Powodem, dla którego nie chcę tego wiązania, jest to, że potrzebuję tego zaimplementowanego na różnych stronach z tym samym układem i nie chcę kodować dla każdego zdarzenia.

Próbowałem zarówno:

$("#myDiv").resize(function(){ 
    equalHeight($("#myDiv")); 
}); 

i

$("#myDiv").content().resize(function(){ 
    equalHeight($("#myDiv")); 
}); 

nie wydaje się do pracy! Jakieś pomysły?

Answer 1

Podstawowym zdarzenie resize można powiązać tylko $ (okno), trzeba użyć wtyczki, jeśli chcesz, aby móc powiązać zdarzenie resize do div:

http://benalman.com/projects/jquery-resize-plugin/

Answer 2

Zakładając, że masz ustawioną liczbę wierszy, możesz sprawdzić liczbę większą niż ta, a następnie odpowiednio ustawić styl div.

Answer 3

Można wyzwolić własne wydarzenie div w funkcji. Tak więc nie zmusi Cię to do przepisywania funkcji kliknięcia.

http://jsfiddle.net/JKByC/7/

Answer 4

 var last_height = $('#div').css('height'); 

     $(window).resize(function() { 
      if($('#div').css('height') != last_height) 
      { 
       last_height = $('#div').css('height'); 
       //do what you want 
      } 
     });