Traversing Using Jquery .find() to Select Element by Class & Store Prop

Question

I'm trying to search through the descendants of the element "service-block" to find the specific element with class "title" using the below code. I can't get the var to have anything but "undefined" assigned. Any help would be much appreciated -

<div class="col-md-4">
        <div id="service-block" class="wp-block default grey-glow">
            <div class="figure">
                <img alt="..." src="~/images/services/nav-icon-white.jpg" class="img-responsive">
            </div>
            <div class="wp-block-body services-text">
                <h2 id="test" class="title">Lorem Ipsum <span class="heavy-header" style="color:#001990;">Lorem Ipsum</span> Lorem Ipsum</h2>
                <p>Lorem Ipsum.</p>
            </div>
        </div>
    </div> 

$("#service-block").hover(function () {
    var originalHeight = $(this).find('.title').prop("id");
});

Answer 1

Is this what you want?

$("#service-block").hover(function () {
    var $elem = $(this).find('.title');
    console.log("id of element: ", $elem.attr("id"));
    console.log("height of element: ", $elem.height()); //added due to your variable name
});

Answer 2

Try to put your code inside $(document).ready() . Then use attr instead of prop

$(document).ready(function(){
   $("#service-block").hover(function(){
     var originalHeight = $(this).find('.title').attr("id");
   });
});