$（this）で始まるクラスから親から子供を選択する方法

Question

入力ボックスの上にいくつかの画像を追加するカスタムjQueryプラグインを作成しています。ハイライトクラスは完全に動作していますが、INPUTBANNERクラスの表示と非表示を切り替えるための.toggle（）のセレクタには助けが必要です。

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

これはあなたが後にあるかのようです

また

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

サイドノートとして、あなたのプラグインをラップする必要がありますinputbannerはあなたがちょうどでき兄弟であるため、親にまで戻って、それを選択するために、.inputbannerまで戻って行かなければなりませんそういう意味で（coll $識別子とisions）

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

    }); 
};