How to use jQuery to retrieve the height of the elements inside a specific container

Question

How to use jQuery to retrieve the height of the elements inside a specific container

I'm uncertain if it's feasible, but I am looking to determine the total height of the content within a specific container. Imagine I have

<div id="container" style="min-height:100vh">
    <div class="child">
      <p>Some text here</p>
    </div>
    <div class="another-child">
      <p>Some text here</p>
    </div>
</div>

How can I accurately find the height of the content within #container? The inline heights provided are just samples to illustrate that the parent height could vary. I am interested in knowing the actual space occupied by the content. This is considering that there may be numerous child elements within the container.

Please note: In the example above, the true height refers to the combined height of those paragraphs if they were not displayed inline.

javascript jquery html css jquery-ui

Answer 1

Answer №1

Unsure if achieving this with a single jQuery/javascript function is possible, but here's a snippet that could prove helpful

HTML

 // A common class has been added to all child elements of div#container
     <div id="container" style="min-height:100vh">
        <div class="child cc">
          <p>Some </br>text here</p>
        </div>
        <div class="another-child cc">
          <p>Some text here</p>
        </div>
    </div>

JS

// Iterating through all child elements using a common class to calculate total height
var cc = 0;
    $("#container > div.cc").each(function(){
        cc += $(this).outerHeight();
    });
$('#height').append('<p>'+ cc+'</p>' );

CSS

 p{
    margin:0px;
        }

Check here for more information on why setting margin:0

View JSFIDDLE

UPDATE

Incorporated an iterator to exclude inline elements. Also, the .each now iterates over elements with the cc class. This allows inline elements to be excluded from having the cc class.

Below is a code snippet to check the display type of an element before calculating its height.

var cc = 0;
    $("#container > .cc").each(function(){
      var getDisplay = $(this).attr('dipslay') // Check the display attribute
       // Using ternary operator 
       getDisplay !=='inline'? (cc += $(this).outerHeight()) :0;
     });

VIEW UPDATED FIDDLE

Answer 2

Unsure if achieving this with a single jQuery/javascript function is possible, but here's a snippet that could prove helpful

HTML

 // A common class has been added to all child elements of div#container
     <div id="container" style="min-height:100vh">
        <div class="child cc">
          <p>Some </br>text here</p>
        </div>
        <div class="another-child cc">
          <p>Some text here</p>
        </div>
    </div>

JS

// Iterating through all child elements using a common class to calculate total height
var cc = 0;
    $("#container > div.cc").each(function(){
        cc += $(this).outerHeight();
    });
$('#height').append('<p>'+ cc+'</p>' );

CSS

 p{
    margin:0px;
        }

Check here for more information on why setting margin:0

View JSFIDDLE

UPDATE

Incorporated an iterator to exclude inline elements. Also, the .each now iterates over elements with the cc class. This allows inline elements to be excluded from having the cc class.

Below is a code snippet to check the display type of an element before calculating its height.

var cc = 0;
    $("#container > .cc").each(function(){
      var getDisplay = $(this).attr('dipslay') // Check the display attribute
       // Using ternary operator 
       getDisplay !=='inline'? (cc += $(this).outerHeight()) :0;
     });

VIEW UPDATED FIDDLE

Answer 3

Answer №2

One possible solution is to try using the code snippet below:

console.log(window.getComputedStyle($("#container")[0]).getPropertyValue("height"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="container" style="min-height:100vh">
  <div class="child" style="height:100%">
    <div class="another-child">
      <p>Some text here</p>
    </div>
    <div class="another-child">
      <p>Some text here</p>
    </div>
  </div>
</div>

Answer 4

One possible solution is to try using the code snippet below:

console.log(window.getComputedStyle($("#container")[0]).getPropertyValue("height"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="container" style="min-height:100vh">
  <div class="child" style="height:100%">
    <div class="another-child">
      <p>Some text here</p>
    </div>
    <div class="another-child">
      <p>Some text here</p>
    </div>
  </div>
</div>

Answer 5

Answer №3

If you want to determine the height of an element using jQuery, you have a few options:

$('#wrapper').height();

This will give you the current computed height of the first matched element.

You can also use:

$('#wrapper').innerHeight();

Which returns the inner height (including padding but not border) of the first matched element.

Alternatively, you can try:

$('#wrapper').outerHeight();

This will provide you with the outer height (including padding, border, and optionally margin) of the first matched element.

Check out a demo here!

Answer 6

If you want to determine the height of an element using jQuery, you have a few options:

$('#wrapper').height();

This will give you the current computed height of the first matched element.

You can also use:

$('#wrapper').innerHeight();

Which returns the inner height (including padding but not border) of the first matched element.

Alternatively, you can try:

$('#wrapper').outerHeight();

This will provide you with the outer height (including padding, border, and optionally margin) of the first matched element.

Check out a demo here!

Answer 7

Answer №4

To determine the height of your container using jQuery, you can utilize the following method: $("selector").height(); This code will provide you with the exact dimensions of your container.

Answer 8

To determine the height of your container using jQuery, you can utilize the following method: $("selector").height(); This code will provide you with the exact dimensions of your container.

Answer 9

Answer №5


var counter = 0;
$("#"+currentID2c+ "> .cc").each(function(){
    var displayValue = $(this).attr('display');
    if(displayValue !== 'inline') {
        counter += $(this).outerHeight();
    } else {
        counter += 0;
    }
});
var total = counter;
console.log(total);

Answer 10


var counter = 0;
$("#"+currentID2c+ "> .cc").each(function(){
    var displayValue = $(this).attr('display');
    if(displayValue !== 'inline') {
        counter += $(this).outerHeight();
    } else {
        counter += 0;
    }
});
var total = counter;
console.log(total);

How to use jQuery to retrieve the height of the elements inside a specific container

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Tips for integrating React into a jQuery-centric web application?

How to access a bootstrap 4 tab panel on a different page

Hover Effect in JavaScript

Changing Location of Carousel in Bootstrap

Photos failing to load in the image slider

Troubleshooting AngularJS POST Request Error with Request Body

ErrorMessage: Found an unexpected character '{' while parsing the jQuery DataTables code

Combine multiple values into a single input in the number field

trouble combining two arrays of JavaScript objects

ReactJS component state fails to update accurately

How to extract only the truthy keys from an object using Angular.js

Angular's Enhanced Feature: Selecting Multiple Columns

Attempting to align a navigation block next to an SVG image

Javascript tabs with clickable links

Experiencing difficulty with MIME type and serialization while sending JSON data using JQuery

CSS tilt effect for images

Determine the cumulative and present slide count on the Bootstrap slider

Storing a collection of strings in a MongoDB database: A step-by-step guide

The width of a <div> element in CSS is not dependent on the width

Utilizing the SmartSuggest jQuery plugin for seamless integration of JSON data