Data Height Set/Get

Dynamically get and set height

by Farzad Cyrus

HTML

<div id="container" data-height="adjust">

<div id="sidebar">

<div class="section" data-height-get>Some dummy content.</div>
<div class="section" data-height-get>Some dummy content, Some dummy content, Some dummy content, Some dummy content, Some dummy content, Some dummy content, Some dummy content, Some dummy content, Some dummy content, Some dummy content, Some dummy content, Some dummy content, Some dummy content, Some dummy content, Some dummy content.</div>

<div class="section" data-height-set></div>

</div>

</div>

JavaScript

(function () {

    //console.log($('[data-height="adjust"]'))

    $('[data-height="adjust"]').each(function (i, e) {

        var $container = $(e),
            $get = $container.find('[data-height-get]'),
            $section = $container.find('[data-height-section]');

        var height1, // GETS OUTSIDE SECTION
            height2; // GETS INSIDE SECTION
            
        // TEMPORARY: FOR TESTING PURPOSES
        var colours = ['#cc0022', '#115599', '#222222'];
        $get.each(function (i, e) {

            _$get = $(e);

            _$get.css({
                'border': '2px solid ' + colours[i],
                'min-height' : '32px'
            });

            // GETS OUTSIDE SECTION
            if (_$get.parents('[data-height]').length && !_$get.parents('[data-height-section]').length) {
                //console.log(_$get);

            }

        });

        //console.error($get)


        // IF HAS SECTION, THEN DO FOR EACH SECTION
        // IF NO SECTION, OTHERWISE DO IT AS NORMAL
        if ($section.length) {

            var _$get = $section.find('[data-height-get]');
            //console.log(_$get);
        } else {}

    });

})();