JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="well">
    <div id="forefather" class="forefathers">
        <h2>Fore Father</h2>
        <div id="parent" class="parents">
            <h2> Parent</h2>
            <div id="right">
                <div class="element">Element1</div>
                <div class="element">Element2</div>
            </div> 
        </div>
    </div>
</div>

CSS

.element{
    background:#fff;
    border: 1px solid #006699;
    padding: 6px 15px;
    margin-bottom: 15px;
}
.parents{
    padding: 15px;
    background:#00CC33;
}
.forefathers{
    padding: 15px;
    background:#FF6600;
}

.forefathers > h2{
    color:#fff;
}

JavaScript

var $elem, $parent, $forefather;
    $elem = $('.element');
    $parent = $elem.parent().parent();
    $forefather = $parent.parent();
    
alert($forefather.attr('class'));