JSFiddle - React, Tailwind, and code Playground

by Jgo Orange

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div data-name="left">
    <ol data-name="branches" id="branches" class="branches lists ">
        <li data-name="branch" data-branch="0" class="placeholder-children root_left">
            <div class="click left"><strong>Branch</strong> - testbranch1
                <input class="br_item" type="hidden" value="111" />
            </div>
            <ol data-name="users" class="users usr_left">
                <li class="usr_left" data-name="user" data-branch="0" user-data="0">
                    <div class="click userleft"><strong>User</strong> - testuser1
                        <input class="ur_item" type="hidden" value="222" />
                    </div>
                </li>
                <li class="usr_left" data-name="user" data-branch="0" user-data="0">
                    <div class="click userleft"><strong>User</strong> - testuser2
                        <input class="ur_item" type="hidden" value="333" />
                    </div>
                </li>
                <li class="usr_left" data-name="user" data-branch="0" user-data="0">
                    <div class="click userleft"><strong>User</strong> - testuser3
                        <input class="ur_item" type="hidden" value="444" />
                    </div>
                </li>
            </ol>
        </li>
    </ol>
</div>

CSS

.left {
    background: #ede6dc;
    position: relative;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.userleft {
    background: #dbd1c3;
    position: relative;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    &:not(: first-child) {
        margin-top: 10px;
    }
}

.lists {
    list-style-type: none;
}

.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}

ol.tree {
    background-color: #FFF;
    margin: 10px;
    padding: 10px;
}

ol {
    list-style-type: none;
    list-style: none;
}

ol li {
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #cccccc;
    color: #0088cc;
    display: block;
    margin: 5px;
    padding: 5px;
    line-height: 18px;
}

JavaScript

$(function() {
    $(document).on('click', '.click', function() {
        _this = $(this);
        $count = _this.parents("[data-name]").length;
        alert($count);
    });
});