CODEWITHSUNDEEP
jquerysharepoint-2010
Harish Hatnapure
Harish Hatnapure

Reputation: 29

How to find height of the inner element in jquery?

The html structure is:

<table class='cls_Name'>
    <tr>
        <td>Name</td>
    </tr>
    <tr>
        <td>
            <div>some operation/text</div>
        </td>
    </tr>
</table>

To get the height of the table I am doing as below:

$('.cls_Name').height();

It returns proper value.

Now I want the height of div:

$('.cls_Name').children('td:nth-child(2)').children('div').height();

But it is returning Null or sometimes also gives error.

Please let me know if anyone has the idea about it.

Thanks in advance

Upvotes: 1

Views: 431

Answers (5)

s.lenders
s.lenders

Reputation: 1149

try the following:

$('.cls_Name td:eq(1)').find('div').height();

Upvotes: 2

supersaiyan
supersaiyan

Reputation: 1730

This would be the better i guess :

$(document).ready(function ()
{
    var sa = $('.cls_Name').find('div').height();
    alert(sa);


 });

Upvotes: 0

RGR
RGR

Reputation: 1571

Better you can specify class name for div element and try this:

<table class='cls_Name'>
    <tr>
        <td>Name</td>
    </tr>
    <tr>
        <td>
            <div class="operation">some operation/text</div>
        </td>
    </tr>
</table>

Script:

$('.operation').height()

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

Because .children('td:nth-child(2)') does not exists try .children('td:nth-child(1)') instead.

Tested Code

<script type="text/javascript">

    $(function()
    {
        console.log($('.cls_Name').find('td:nth-child(1)').find('div').height());
    });

</script>
<table class='cls_Name'>
    <tr>
        <td>Name</td>
    </tr>
    <tr>
        <td>
            <div>some operation/text</div>
        </td>
    </tr>
</table>

that shown me 20 in console.log();

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

The <td> elements are descendants, but not children, of the <table> element. The .children() function only goes down a single level in the DOM - so, in this case, to the level of the <tr> elements. Try the following instead:

$('.cls_Name').find('td:eq(1)').children('div').height();

Upvotes: 5

Related Questions