Как выбрать ребенка от родителя по классу, начинающемуся с $ (this)

Question

Я создаю собственный плагин jQuery, чтобы добавить несколько изображений над полем ввода. Класс highlight работает отлично, но мне нужна помощь с селекторами в .toggle () для отображения и скрытия класса INPUTBANNER.

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

Похоже, это то, что вам нужно, вам не нужно возвращаться к родителю, а затем возвращаться к .inputbanner, чтобы выбрать его, так как inputbanner - это брат, который вы можете просто сделать:

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

Также, как примечание, вы должны обернуть свой плагин примерно так (чтобы не было коллизий с идентификатором $)

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

Answer 2

Я хотел бы увидеть состояние вашей разметки DOM / html, чтобы проверить его, но попробуйте это:

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();
            });

    });
};