jQuery: height of highest matching element

Posted on 2011-10-26
Last Modified: 2012-05-12
Using jQuery, how can I get the height of the highest matching element?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src=""></script>

<script type="text/javascript">
$(document).ready(function() {

 alert('The highest div.accordionContent is ??? px high');


<div class="accordion">
 <div class="accordionButton">
 <strong>Item 1</strong>
 <div class="accordionContent">
 Convallis dignissim. Proin ultricies.
 <div class="accordionButton">
 <strong>Item 2</strong>
 <div class="accordionContent">
 Vestibulum aliquam diam ac metus convallis dignissim. Proin ultricies
 purus et dui hendrerit euismod nec et nunc. Nullam non quam dui, id aliquet
 metus. Nulla rhoncus eleifend bibendum. Morbi tempus eleifend tincidunt.
 Suspendisse venenatis, libero ac hendrerit facilisis, nunc nisl consectetur
 nisl, a lobortis nibh leo et nulla. Cras a ornare elit. Aenean a facilisis
 nisl. Etiam feugiat consequat sapien, a rhoncus lorem ullamcorper sed.
 Etiam placerat convallis leo at condimentum. Aliquam condimentum cursus
 metus, sit amet semper quam eleifend quis. Vivamus posuere placerat urna,
 ut adipiscing nibh iaculis sit amet. Pellentesque iaculis tincidunt diam,
 ac porta metus ornare sed.
 <div class="accordionButton">
 <strong>Item 3</strong>
 <div class="accordionContent">
 Curabitur vehicula, nisi non volutpat dictum, mauris est tristique eros, 
 eu ornare nisi nisl non odio. Vivamus posuere enim sed nibh aliquam pretium. 
 Fusce in pulvinar metus. Nulla tempor metus cursus purus cursus ut varius nibh cursus. 
 Nulla rhoncus eleifend bibendum. Morbi tempus eleifend tincidunt.
 Pellentesque iaculis tincidunt diam, ac porta metus ornare sed.
 <div class="accordionButton">
 <strong>Item 4</strong>
 <div class="accordionContent">
 Hello world.
<div class="c"></div>

Open in new window

Question by:hankknight
    LVL 5

    Accepted Solution

    Try something like this:

    var maxHeight = 0;
    $('.accordionContent').each(function() {
       var acHeight = $(this).height();
       if (maxHeight < acHeight) {
          maxHeight = acHeight;
    alert('The highest div.accordionContent is' + maxHeight + ' px high');

    Open in new window

    BR, Marcus
    LVL 51

    Assisted Solution

    i came up with a similar function :)

    $(document).ready(function() {
      var h=0;
      $(".accordion .accordionContent p").each( function(){h=$(this).height()>h?$(this).height():h;} );
      alert('The highest div.accordionContent is ' + h + ' px high');

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Introduction HyperText Transfer Protocol ( or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
    Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now