targeting child of event.currentTarget

Question

I found a simple tab-menu jQuery plugin that needs some adapting for a project of mine. The tabs in question - being absolutely positioned - are taken out of the flow and as such don't contribute to the wrapping div's height, so the background behind them don't show. I am trying to force the height of the wrapping div (containing the background image) to match the height of the selected tab (+400px for nav and header) and to achieve that on the fly I am adapting the original jQuery file. Here is the code (with the few extra lines (commented 'added!') of mine).

var cbpHorizontalMenu = (function () {
    var $listItems = $('#cbp-hrmenu > ul > li'),
        $menuItems = $listItems.children('a'),
        $body = $('body'),
        current = -1;

    function init() {
        $menuItems.on('click', open);
        $listItems.on('click', function (event) {
            event.stopPropagation();
        });
    }

    function open(event) {
        if (current !== -1) {
            $listItems.eq(current).removeClass('cbp-hropen');
        }
        var $item = $(event.currentTarget).parent('li'),
            idx = $item.index();
        if (current === idx) {
            $item.removeClass('cbp-hropen');
            //added!
            current = -1;
        } else {
            $item.addClass('cbp-hropen');
            current = idx;
            $body.off('click').on('click', close);
            var content2Height = jQuery(".cbp-hrsub").height() + 400;
            jQuery('#content2').height(content2Height); //added
        }
        return false;
    }

    function close(event) {
        $listItems.eq(current).removeClass('cbp-hropen');
        //added!
        current = -1;
    }
    return {
        init: init
    };
})();

It does something, but not what I need. It gets the height of the first div.cbp-hrsub and applies it (+400px) to the div.content2. What I need is to target the current tab (a child of event.currentTarget, me thinks?), to calculate its height and to apply it to the content2 div.

This is a simplified HTML if that helps:

<div class="content2">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
    <ul>
        <li>
            <a href="#">tab 1</a>
            <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner"> 
                    I am 1st tab, 100px height.
                </div>
            </div>
        </li>
        <li>
            <a href="#">tab 2</a>
            <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner">
                    I am 2nd tab, 200px height.

                </div>
            </div>
        </li>
        <li>
            <a href="#" class="white06">Nigel's CV</a>
            <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner"> 
                    I am 3rd tab, 300px height.
                </div>
            </div>
        </li>

    </ul>
</nav>

Just to clarify, I want to keep the original plugin as it is, just to insert something instead of my 2 lines, towards the end of file. (var content2Height = jQuery(".cbp-hrsub").height() + 400;jQuery('#content2').height(content2Height); //added Thanks everyone for their time.

Zel

Answer 1

I get inconsistent results when targeting a parent-container with .parent(). In this line:

var $item = $(event.currentTarget).parent('li'),
        idx = $item.index();

Try instead to use .closest():

var $item = $(event.currentTarget).closest('li'),
        idx = $item.index();

Oh, wait! I see the issue:

var content2Height = jQuery(".cbp-hrsub").height() + 400;

You are retrieving all the .cbp-hrsub classed elements, here. It's going to try to return a height, and I'm not exactly certain how jQuery determines that when it's looking at an array, but I'm guessing it just picks the first element out of the array.

What you're really needing at this point, then, is something like this:

var content2Height = $item.first(".cbp-hrsub").height() + 400;

THAT should give you the height of .cbp-hrsub contained within the current item (found above), and not that of the first .cbp-hrsub in the array.