How to select child from parent by class starting with $(this)

Question

I'm creating a custom jQuery plugin to add a few images above an input box. The highlight class are working perfectly, but I need help with the selectors on the .toggle() for showing and hiding the INPUTBANNER class.

jQuery.fn.inputmenu = function() {
    function createInputMenu(node) {
        $(node).bind('focus', function() {
            $(this).parent().toggleClass('highlight');

            //SHOW INPUTBANNER CLASS
            $(this).parent().('.inputbanner').toggle();
        });
        $(node).bind('blur', function() {
            $(this).parent().toggleClass('highlight');

            //HIDE INPUTBANNER CLASS
            $(this).parent().('.inputbanner').toggle();
        });
        $(node).parent().append('<div class="inputbanner">some images here</div>');
    }
    return this.each(function() {
        createInputMenu(this);
    });
};

Answer 1

i'd like to see the state of your DOM / html markup to test it out, but try this:

jQuery.fn.inputmenu = function() {
    return this.each(function() {
           var $node= $(this);
$node.parent().append('<div class="inputbanner" style="display:none">some images here</div>');
         var $nodeImageContainer= $node.parent().find('div.inputbanner').eq(0);
           $node.bind('focus', function() {
              //SHOW INPUTBANNER CLASS
              $nodeImageContainer.addClass('highlight').show();
           })
           .bind('blur', function() {
               //HIDE INPUTBANNER CLASS
               $nodeImageContainer.removeClass('highlight').hide();
            });

    });
};

Answer 2

This seems to be what you are after, you don't have to go back up to the parent and then go back down to the .inputbanner to select it, since inputbanner is a sibling you can just do:

// use .prev() if the element is before
$(this).next('.inputbanner')

Also as a side note, you should wrap your plug-in like so (so that there are no collisions with the $ identifier)

(function($) {
    $.fn.inputmenu = function() {
        // plugin implementation here
    }
})(jQuery);