CODEWITHSUNDEEP
jquery-selectors
HLto Dm
HLto Dm

Reputation: 275

how to get all nested div heights using jQuery

How to get all heights from the div's nested inside the "GO" div:

<div id="GO" style="max-height: 100px;">
<div style="height: 569px;"></div>
<div style="height: 469px;"></div>
<div style="height: 269px;"></div>
<div style="height: 69px;"></div>
<div style="height: 169px;"></div>
</div>
<div id="STOP">
</div>

I tried using this code

var vales;
vales =$("#GO div").height();
//planB
vales =$("#GO").height();

But it didn't solve my problem

Upvotes: 0

Views: 386

Answers (3)

Jai
Jai

Reputation: 74738

As you can see you have many children divs in the parent one so you need to iterate over the children to get each of them. You can create a blank array and with use of each loop you can push the height values in it but i would suggest you to use .map() method which creates an array of returned values.

You can use .map().get(): 

var vales = $("#GO div").map(function(){
    // return $(this).css('height'); // only if you want applied css values with 'px' etc.
    return $(this).height();
}).get();

$('pre').html(JSON.stringify(vales));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre></pre>
<div id="GO" style="max-height: 100px;">
<div style="height: 569px;"></div>
<div style="height: 469px;"></div>
<div style="height: 269px;"></div>
<div style="height: 69px;"></div>
<div style="height: 169px;"></div>
</div>
<div id="STOP">
</div>

Upvotes: 1

Daniel Higueras
Daniel Higueras

Reputation: 2404

To iterate the children div's and get the height value, you can do something like this:

$("#GO > div").each(function() {
    $(this).height();
});

Upvotes: 2

botem
botem

Reputation: 348

Do you want like this ?

$("#GO").children().each(function(){
    $(this).height();
});

Upvotes: 0

Related Questions