CODEWITHSUNDEEP
javascriptjqueryhtmlcssheight
Jackou
Jackou

Reputation: 9

How to get the height of paragraph element of specific class element (js / jquery)

I want to get the height of the paragraph element inside a class element.

For example my html code:

<div class="myClass">
    <p> here goe's some awesome text </p>
</div>

<div class="myClass">
    <h1>Some Heading</h1>
    <p>another great text</p>
</div>

Now i want to get access to the total height of the div element, but also want to get access to the height of the child element p.

I tried with getElementsByClassName('myClass').children('p'), but that doesn't work. I want to set the height of the div with jQuery, on document ready the height should be the height of div-element minus the height of the divs p element.

Something like:

var divs = $(document).getElementsByClassName('myClass');
for (var i = 0; i < divs.length; i++){
    divs[i].style.height = divs[i].height() - divs[i].children('p').height();
}

I'm not sure how the actual correct code would look like, or if there is even a way to get the height of the child p element.

Upvotes: 0

Views: 6417

Answers (6)

Blake Simpson
Blake Simpson

Reputation: 1088

Don't forget to use outerHeight(true) to include and padding and/or margin that the container has.

$(function() { // Wait for page to load
  $('.myClass').each(function() { // Loop over all items
     var div = $(this),
       height = div.outerHeight(true), // Get height + margin + padding
       paragraphHeight = div.find('p').outerHeight(true); // Get height + margin + padding of P child

    div.height(height - paragraphHeight); // Set the new height
  });
});

JS Fiddle: http://jsfiddle.net/b9tcxxks/

Upvotes: 0

dfsq
dfsq

Reputation: 193261

You can use height method with outerHeight to calculate height of the p:

$('.myClass').height(function(i, oldHeight) {
    return parseInt(oldHeight) - $(this).find('p').outerHeight(true)
});
.myClass {
    overflow: hidden;
    background-color: #EEE;
    margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass">
    <h2>Subtitle</h2>
    <p>here goe's some awesome text</p>
</div>

<div class="myClass">    
    <h1>Some Heading</h1>
    <p>another great text</p>
</div>

Upvotes: 0

sasi
sasi

Reputation: 209

Here is the working demo

http://jsfiddle.net/silpa/qzvfswz8/66/

$('.myClass').each(function(){
$height_div = $(this).height();
$height_p = $(this).find('p').height(); 
$(this).css('height',$height_div-$height_p);
});

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115232

You can do something like this simple , Using css() jquery method with callback function

$('.myClass').css('height', function(i, v) {
  return parseInt(v, 10) - parseInt($(this).children('p').height(), 10);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myClass">
  <p>here goe's some awesome text</p>
</div>

<div class="myClass">
  <h1>Some Heading</h1>
  <p>another great text</p>
</div>

Upvotes: 0

Prashant
Prashant

Reputation: 702

You can use jquery and go as below.

$('.myClass > p').each(function(  ) {
    alert($(this).height());
});

Hope this might help you.

Upvotes: 0

DaniP
DaniP

Reputation: 38252

With Jquery you can search for the p inside each myClass element. Try this:

$(document).ready(function(){
    $('.myClass').each(function(){
        var h = $(this).find('p').height();
        alert(h)
    })
})

Check this DemoFiddle

Upvotes: 1

Related Questions