Why am I getting child property values of jQuery object instead of parent prop values?

Question

I want to check if there's an overflow in a table cell and if there's no overflow remove a class that disables scrolling in the cell. I want to to this by comparing clientHeight & scrollHeight properties. If I call $(this) I see:

So as far as I understand I need to get the properties from the first element of the array? But when I call $(this)["0"].clientHeight or $(this).get(0) i receive a value of a child property rather than a div's in which this child resides. How can I get properties of

<div class="scrollable verticalCenterAligned">

What am I missing? Thanks!

HTML:

            <td>
                <div class="scrollable verticalCenterAligned">
                    <div class="form-group">
                        @media.Selector
                    </div>
                </div>
            </td>
            <td>
                <div class="scrollable verticalCenterAligned">
                    @Html.DisplayFor(modelItem => media.MediaRSSURL)
                </div>
            </td>

JavaScript:

$('.scrollable').each(function() {
    console.log($(this));
    console.log($(this)["0"].clientHeight);
    console.log($(this)["0"].scrollHeight);
});

</script>

ScreenShot of console:

on the screen you see that I'm getting the value of the child node property but not of the div in which this child resides.

what wrong with the code you provided? what do you want from it? — vnt, Sep 23 '17 at 16:59
@vnt I'm getting child property value (
) and I want property of (
) — Dmitriy Klyushin, Sep 23 '17 at 17:02
it's totally fine as I can see here https://jsfiddle.net/tamvo/nhnL3yw2/ — vnt, Sep 23 '17 at 17:05
@vnt this is what I'm getting in console [screenshot](https://app.box.com/v/23-2017-scr) — Dmitriy Klyushin, Sep 23 '17 at 17:43

score 0 · Answer 1 · answered Sep 23 '17 at 21:53

I've found an answer in another post

after I wrapped my function in $(window).load(function() {}); it started showing the correct value.

Working code:

<script type="text/javascript">
$(window).load(function() {
    $('.scrollable').each(function () {
        if ($(this)[0].scrollHeight <= $(this)[0].clientHeight) {
            $(this).removeClass("scrollable");
        }
    });
});

Why am I getting child property values of jQuery object instead of parent prop values?

1 Answers1